Question

我正在努力将jParallax插件与jQuery Circulate插件结合起来。基本上，我想让一个行星绕着我所拥有的jParallax插件“轨道运行”，或者至少在它上面，然而，每当我将右侧放置在循环插件下方停止工作。当我在jParallax代码下方（标签正上方）向下移动时，它工作正常，但jParallax停止工作！谁知道这里发生了什么？起初我以为这是因为层相互冲突，但只要行星不循环，jParallax仍然可以正常工作。任何回复都是'ppreciated！ ;）

http://goatsy.me/parallax_circulatetest.html

这是代码：

<html>
<head>
<script type="text/javascript" src="jquery-1.2.6.min.js"></script> 
<script type="text/javascript" src="jquery.jparallax.js"></script> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css" /> 
<script type="text/javascript"> 
jQuery(document).ready(function(){
jQuery('#parallax').jparallax({});
});
</script> 
<meta name="robots" content="noindex, nofollow" /> 
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type='text/javascript' src='CIRCULATE/Circulate/js/jquery.easing.1.2.js' </script>
<script type='text/javascript' src='CIRCULATE/Circulate/js/jquery.circulate.js' </script>
<script type='text/javascript' src='CIRCULATE/Circulate/js/example.js'></script>
 <link rel='stylesheet' type='text/css' href='CIRCULATE/Circulate/css/style.css' /> 
</head>

<body>

<img src="CIRCULATE/Circulate/images/planetspin.gif" alt="A Friggin Unicorn, yo." id="unicorn" />
<p>&nbsp;</p>
<p>&nbsp;</p><p>&nbsp;</p><p>&nbsp;</p>
<div id="page-wrap"> 
</div>
<div id="contenttop">
<p>&nbsp;</p><p>&nbsp;</p>
<div id="parallax"> 
<div style="width: 1174px; height: 481px;"> 
<img alt="" src="images/spacebg.png"/> 
</div> 
<div style="width: 1374px; height: 681px;"> 
<img style="position:absolute; top:-300px; left:-200px; bottom:0px;" alt="" src="images/planetbg.png"/> 
</div> 
<div style="width: 861px; height: 554px;"> 
<img style="position:absolute; top:200px; left:400px; bottom:0px;" alt="" src="images/rocketship.png"/> 
</div>  
<div style="width: 367px; height: 537px;"> 
<img style="position:absolute; top:50px; right:50px; bottom:0px;" alt="" src="images/astrogoat.png"/> 
</div> 

</div>
</body>
</html>

Answer 1

尝试将html head内容更改为以下内容：

<meta name="robots" content="noindex, nofollow" /> 
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
<link rel='stylesheet' type='text/css' href='CIRCULATE/Circulate/css/style.css' />
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="jquery.jparallax.js"></script> 
<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#parallax').jparallax({});
    });
</script> 
<script type='text/javascript' src='CIRCULATE/Circulate/js/jquery.easing.1.2.js'></script>
<script type='text/javascript' src='CIRCULATE/Circulate/js/jquery.circulate.js'></script>
<script type='text/javascript' src='CIRCULATE/Circulate/js/example.js'></script>

从我可以看到你在页面上包含两次jQuery，我删除了一个并将新版本移到了javascript包含的顶部。我还将link和meta标记移到了script标记

之上

需要有关jParallax冲突脚本的帮助

1 个答案: