0
视差我要让视差网站中，我有视差website.I所需的必要的头有图像夫妇（只有四所示）。我下面所附的HTML和CSS文件的代码。如何使网站
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My page</title>
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js"></script>
<script type="text/javascript" src="script/jquery-1.11.3.js"></script>
<script type="text/javascript" src="script/jquery.parallax-1.1.3.js"></script>
<script type="text/javascript" src="script/jquery.localScroll.js"></script>
<script type="text/javascript" src="script/jquery.scrollTo.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#nav').localScroll();
});
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#first').parallax("50%", 0.2);
$('#second').parallax("20%", -1.4);
$('#third').parallax("15%", -1.4);
$('#fourth').parallax("5%", -1.4);
});
</script>
</head>
<body>
<ul id="nav">
<li><a href="#first" title="next section"><img src="images/dot.png"></a></li>
<li><a href="#second" title="next section"><img src="images/dot.png"></a></li>
<li><a href="#third" title="next section"><img src="images/dot.png"></a></li>
<li><a href="#fourth" title="next section"><img src="images/dot.png"></a></li>
</ul>
<div id="a">
<div id="first">
<div class="story">
<div class="floatleft">
This is my first div to display image.
</div>
</div>
</div>
<div id="second">
<div class="story">
<div class="floatleft">
This is my second div to display image.
</div>
</div>
</div>
<div id="third">
<div class="story">
<div class="floatleft">
This is my third div to display image.
</div>
</div>
</div>
<div id="fourth">
<div class="story">
<div class="floatleft">
This is my fourth div to display image.
</div>
</div>
<div>
</div>
</body>
</html>
My Css code goes below
@charset "utf-8";
body{
margin: 0;
min-width: 980px;
padding: 0;
}
ul{
font-family:"Proxima Nova Light", 'Helvetica Neue', Arial, Helvetica, sans-serif;
font-size-adjust:0.488;
font-weight:200;
font-style:normal;
}
.floatleft{
float: left;
margin: 0 0 0 20px;
}
.story{
margin: 0 auto;
min-width: 980px;
width: 980px;
}
.story .floatleft{
padding: 100px 0 0 0;
position: relative;
width: 350px;
}
#first #second #third #fourth{
width=100%;
}
#nav{
list-style: none;
position: fixed;
right: 20px;
}
#nav li{
margin: 0 0 15px 0;
}
#first{
background:url('images/ac.JPG') 50% 0 no-repeat fixed;
background-image: url('images/ac.JPG') 50% no-repeat fixed;
border-radius: .10em
display: block;
color: white;
height: 600px;
margin: 0;
padding: 160px 0 0 0;
}
#second{
background:url('images/ac1.JPG') 50% 0 no-repeat fixed;
background-image: url('images/ac1.JPG') 50% no-repeat fixed;
display: block;
color: white;
height: 600px;
margin: 0;
padding: 160px 0 0 0;
}
#third{
background:url('images/rc.JPG') 50% 0 no-repeat fixed;
background-image: url('images/rc.JPG') 50% no-repeat fixed;
display: block;
color: white;
height: 600px;
margin: 0;
padding: 160px 0 0 0;
}
#fourth{
background: url(images/rc1.JPG) 50% 0 no-repeat fixed;
background-image: url('images/rc1.JPG') 50% no-repeat fixed;
background-origin: content-box;
display: block;
color: white;
height: 650px;
padding: 100px 0 0 0;
}
任何人都可以给我任何东西如何使这作为垂直视差。 在此先感谢