视差不动

时间:2013-12-25 18:43:33

标签: javascript jquery parallax

我今天在一个教程的帮助下尝试了我网站上的视差 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;
}

如果我的剧本不存在就好......我不知道自己要做什么?

1 个答案:

答案 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>