Need Help with jParallax conflicting scripts
I am trying desparately to combine the jParallax plugin with the jQuery Circulate plugin. Basically, i want to have a planet "orbiting" around the jParallax plugin i have, or at least on top of it, however, everytime i place the right beneath the circulate plugin stops working. Wh开发者_运维百科en i move it down underneath the jParallax code (right above the tag), it works fine, but the jParallax stops working! Anyone know what's going on here? At first I thought it was because of the layers conflicting, but the jParallax is still working fine so long as the planet doesn't circulate. Any responses will be 'ppreciated! ;)
http://goatsy.me/parallax_circulatetest.html
here's the code:
<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> </p>
<p> </p><p> </p><p> </p>
<div id="page-wrap">
</div>
<div id="contenttop">
<p> </p><p> </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>
Try changing your html head content to the following:
<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>
From what I can see you have jQuery included twice on the page, I've removed one and moved the newer version to the top of the javascript includes. I also moved your link and meta tags above the script tags
加载中,请稍侯......
精彩评论