我今天在一个教程的帮助下尝试了我网站上的视差 http://www.alsacreations.com/tuto/lire/1417-zoom-sur-effet-parallaxe.html。但我有一个问题,我的背景不动。这是我的Html:
<div id="slide1">
<section id="eurocopter">
<div id="conteneur-eurocopter">
<div id="zone-gauche">
<img src="images/img_p_partenaires/eurocopter.png" />
<br />
</div>
<div id="zone-droite">
</div>
</div>
</section>
<section id="eurocopter2">
<div id="conteneur-eurocopter2">
<div id="zone-gauche">
<img src="images/img_p_partenaires/eurocopter.png" />
<br />
</div>
<div id="zone-droite">
</div>
</div>
</section>
<section id="eurocopter3">
<div id="conteneur-eurocopter3">
<div id="zone-gauche">
<img src="images/img_p_partenaires/eurocopter.png" />
<br />
</div>
<div id="zone-droite">
</div>
</div>
</section>
</div>
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#slide1').parallax("center", 0, 0.1, true);
})
</script>
我的css:
section{
overflow:hidden;
height: 100%;
}
#slide1 {
background: url(http://localhost:8888/odin/images/img_p_partenaires/fond.png) center 0 no-repeat fixed;
}
#eurocopter{
margin: 0 auto;
}
#conteneur-eurocopter{
width:1024px;
height: 600px;
margin: 0 auto;
}
#eurocopter2{
margin: 0 auto;
}
#conteneur-eurocopter2{
width:1024px;
height: 600px;
margin: 0 auto;
}
#eurocopter3{
margin: 0 auto;
}
#conteneur-eurocopter3{
width:1024px;
height: 600px;
margin: 0 auto;
}
如果我的剧本不存在就好......我不知道自己要做什么?
答案 0 :(得分:0)
您需要在jQuery parallax
之前包含jQuery库<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.parallax-1.1.3.js"></script>