- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
当我将 Scrollorama 插件合并到我的网页时,Cycle 插件停止运行。我尝试合并 jQuery.noConflict 但它仍然不起作用。我执行的 jQuery.noConflict() 是错误的还是其他原因?:
链接:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<link href='http://fonts.googleapis.com/css?family=Cuprum:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/jquery.scrollorama.js"></script>
Scrollorama 插件:
<script>
var $j = jQuery.noConflict();
$j(document).ready(function() {
var scrollorama = $j.scrollorama({
blocks:'.scrollblock'
});
});
</script>
循环插件:
<script>
$(function(){
$('#play').click(function(){ $('#slider').cycle('resume'); return false;});
$('#pause').click(function(){ $('#slider').cycle('pause'); return false;});
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#previous',
pager: '#pager',
timeout: 5000,
speed: 500
});
});
</script>
我过去曾尝试针对不同的问题做出不同的选择,但都没有奏效。这可能是插件的问题,而不是我如何将它们实现到我的网站中的问题?
最佳答案
我对 superscrollorama 也有同样的问题几个星期以来我都无法破解它,直到我发现控制台。控制台允许我跟踪所有 JS 错误。
如果您按此顺序嵌入文件:
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/themes/smoothness/jquery-ui.css"/>
<link href='http://fonts.googleapis.com/css?family=Cuprum:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"> </script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/jquery.scrollorama.js"></script>
然后将所有代码放入:
(function($){
})(jQuery);
例子:
(function($){
$(document).ready(function() {
var scrollorama = $j.scrollorama({
blocks:'.scrollblock'
});
});
$('#play').click(function(){ $('#slider').cycle('resume'); return false;});
$('#pause').click(function(){ $('#slider').cycle('pause'); return false;});
$('#slider').cycle({
fx: 'scrollHorz',
next: '#next',
prev: '#previous',
pager: '#pager',
timeout: 5000,
speed: 500
});
})(jQuery);
它应该可以正常工作。
对于 superscrollorama ,该示例将 jQuery 嵌入到正文中。对于页面上额外的 jQuery 插件,TweenMax 和 jquery.min 需要按以下顺序移动到头部:
<head>
... Your Meta, CSS files, ...
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')</script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="js/greensock/TweenMax.min.js"></script>
... Your other jQuery files, mootools, ...
</head>
您的 CSS 文件可能出现在 jQuery.noConflict();
的上方或下方,但您所有的 jQuery 文件都必须出现在 TweenMax 之后。
jquery.lettering-0.6.1.min.js
和 jquery.superscrollorama.js
可能保留在正文中。请记住在所有代码周围添加 (function($){ ... })(jQuery);
:
(function($){
$(document).ready(function() {
// set rotation of flash
TweenMax.set("#newversion", {rotation: 15});
... and so on ...
})(jQuery);
关于javascript - 将 Scrollorama 与 Cycle 插件和 jQuery.noConflict() 结合使用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24644537/
我一直在一个页面上使用 2 个不同版本的 jQuery,并尝试利用“noConflict”。 如果我为每个 jQuery 版本建立一个变量(例如:$a 和 $b),我是否会将所有 $ 替换为“$a”和
我想包含 jQuery,并希望我可以做如下的事情: $.noConflict(); jQuery("#id").click(Alert("Hello World")); End.noConflict
我使用 Prototype JS 作为主要 JS 库,并且我已将最后一个 RedactorJS 与 jQuery 以无冲突模式集成,但我无法启动如下功能: jQuery('#redactor').re
我在我的 Rails 应用程序中使用 Prototype 和 jQuery。为了解决 $ 冲突,我执行以下操作: var $j = jQuery.noConflict(); 这基本上工作正
我尝试使用 jQuery.noConflict() 但在 window.load 函数中我收到“$ 不是函数”错误。 我的代码: jQuery.noConflict(); jQuery(documen
我一直在使用 masonry 在 this site 上收到未捕获的类型错误 Uncaught TypeError: Cannot call method 'apply' of undefined 当
我需要使用第三方提供的一些用 jquery 编写的库。一旦我尝试合并 jquery,我们最终会与代码库中的 $ 符号发生冲突。我能够通过为 $ 符号创建别名来解决冲突,然后也在第三方库中使用别名更新
我在同一个 html 页面上使用 javascript 和 jquery 代码。由于某种原因,jQuery 库阻止我的 native JavaScript 代码正常工作。 我找到了这个页面:jQuer
这个问题已经有答案了: Including More Than One jQuery Versions (2 个回答) 已关闭 9 年前。 我有以下代码, alert($().jquery); //
我加载了多个 jquery 库(无法更改这一点,托管 ecom 平台,对某些内容的访问权限有限),所以我需要避免它们发生冲突。当前代码: $(document).ready(function(
这是我尝试使用下划线运行的小代码: var data = [ {"name": "Romania"}, {"name": "Virgin Island
这是我在页面中使用的详细信息... 当我要并行使用所有三个脚本时, slider 脚本不起作用,所以给我解决方案如何一起使用。 最佳答案 使用jQuery.noConflict()
我有两个文件。 HTML 和 .js 文件。在 code.js 中,我编写了 jquery 代码,在 HTML 文件中,我包含了 code.js,如下所示: jQuery.noConflict(
我正在编写一个书签,我想在其中使用 jquery forms 插件。 我遇到的问题是,可能使用书签的网页可能使用不同的 js 库,该库已经使用“$”。没问题,我可以告诉 jQuery 使用 noCon
我有一行代码导致图像 slider 和自动完成的搜索栏之间发生冲突:$J = jQuery.noConflict(); 我在这一行之前有两个脚本:jquery_1-6-4.js 和 jquery.au
我有以下一段 JavaScript,将从客户的网站引用。它使用 jQuery 1.5,所以我的问题是如果客户端已经加载了一个 jQuery 实例怎么办?或者替代的 JavaScript 库? 我正在使
我正在使用我的 Jquery 应用程序和其他 javascript 库。当用谷歌搜索时,我开始知道 Jquery.noConflict() 是避免与其他库发生冲突的解决方案。出于测试目的,我在 htm
我继承了这样开头的脚本: var $j = jQuery.noConflict(); 但我不知道为什么要这样做。我知道我们正在尝试解决冲突,但我如何才能找到它正在尝试解决的冲突? 如果我们找不到真正的
我正在将 jQuery 脚本动态加载到随机页面中。有时他们支持 jQuery,有时他们有其他库,有时他们根本没有任何库.. 我需要支持所有情况,因此,首先我检查 jQuery 是否已加载。如果不是,我
我有一些在 jQuery 中给出的代码,我对它真的很陌生。我需要使用 jQuery.noConflict() 方法,因为我也在使用 Mootools 框架。我只是不知道应该在哪里替换“jQuery”代
我是一名优秀的程序员,十分优秀!