gpt4 book ai didi

javascript - 将 Scrollorama 与 Cycle 插件和 jQuery.noConflict() 结合使用

转载 作者:行者123 更新时间:2023-11-30 12:40:29 24 4
gpt4 key购买 nike

当我将 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.jsjquery.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/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com