自己打算以后可以把这个作为自己官方网站设计的一个标准,雅虎这个界面的网址是https://cn.overview.mail.yahoo.com,然后自己仿照这个做了一个。
一开始很多问题,注意要加上
backgroung-attachment: fixed
这样才会没有问题了。
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<meta name="viewport" content="width=divice-width,initial-scale=0.85,user-scalable=no,maximum-scale=0.85">
<title>梦想不止步</title>
<style>
* html{
background-attachment:fixed;
}
.div1{
background-image: url("images/image1_large.jpg");
background-size: 1800px;
background-repeat: no-repeat;
background-position: 0% -520px;
background-attachment: fixed;
/*最终自己加上了这句话终于成功了*/
}
.div2{
background-image: url("images/image5_large.jpg");
background-size: 1800px;
background-repeat: no-repeat;
background-position: 0% -720px;
background-attachment: local ;
}
.div3{
background-image: url("images/image3_large.jpg");
background-size: 1800px;
background-repeat: no-repeat;
background-position: 0% -720px;
background-attachment: local ;
}
.div4{
background-image: url("images/image4_large.jpg");
background-size: 1800px;
background-repeat: no-repeat;
background-position: 0% -720px;
background-attachment: local ;
}
.div5{
background-image: url("images/image2_large.jpg");
background-size: 1800px;
background-repeat: no-repeat;
background-position: 0% -720px;
background-attachment: local ;
}
*,body{
padding: 0;
margin: 0;
font-family: "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
}
.dialog{
width: 100%;height:160px;text-align: center;padding-top: 80px;background-color: #00BFFF;
}
.show{
width:100%;height: 400px
}
</style>
</head>
<body>
<div style="width: 100%;height:160px;text-align: center;padding-top: 80px;background-color: #00BFFF;">
<h1 >这只是一个简单的尝试</h1>
</div>
<div style="width:100%;height: 400px" class="div1" id="div1"></div>
<div class="dialog" style="background-color: #00EE00">
<h1 >这只是一个简单的尝试</h1>
</div>
<div class="show div2" id="div2"></div>
<div class="dialog" style="background-color: #FF00FF">
<h1 >这只是一个简单的尝试</h1>
</div>
<div class="show div3" id="div3"></div>
<div class="dialog" style="background-color: #EE7621">
<h1 >这只是一个简单的尝试</h1>
</div>
<div class="show div4" id="div4"></div>
<div class="dialog" style="background-color: #B23AEE">
<h1 >这只是一个简单的尝试</h1>
</div>
<div class="show div5" id="div5"></div>
<!--<div style="width:100%;height: 300px;background-color: #444444">-->
<!---->
<!--</div>-->
<script>
window.onload=function(){
var i=0;
var fix=0;
var div1=document.getElementById("div1");
var div2=document.getElementById("div2");
var div3=document.getElementById("div3");
var div4=document.getElementById("div4");
var div5=document.getElementById("div5");
var scrolltop1d=div1.style.backgroundPosition;
var scrolltop2d=div2.style.backgroundPosition;
var scrolltop3d=div3.style.backgroundPosition;
var scrolltop4d=div4.style.backgroundPosition;
var scrolltop5d=div5.style.backgroundPosition;
var scrolltop1s;
var scrolltop2s;
var scrolltop3s;
var scrolltop4s;
var scrolltop5s;
window.onscroll=function(){
var scrolltop = document.documentElement.scrollTop||document.body.scrollTop;//上滑了的距离,为了体现兼容加一点东西
var scrolltop1=((scrolltop-520))*0;
var scrolltop2=((scrolltop-560*0.4)-720)*0.95;
var scrolltop3=((scrolltop-560*1.7)-720)*0.95;
var scrolltop4=((scrolltop-560*2.9)-720)*0.95;
var scrolltop5=((scrolltop-560*3.9)-720)*0.95;
if(scrolltop1<0) {
for (i = 0; i < 1000; i++) {
scrolltop1s = scrolltop1d + (scrolltop1 - scrolltop1d) / 1000 * i;
div1.style.backgroundPosition = "0% " + scrolltop1s + "px";
}
}
if (scrolltop2 > -720 && scrolltop > 200) {
for(i=0;i<1000;i++) {
scrolltop2s=scrolltop2d+(scrolltop2-scrolltop2d)/1000*i;
div2.style.backgroundPosition = "0% " + scrolltop2s + "px";
}
}
if (scrolltop3 > -720) {
for(i=0;i<1000;i++) {
scrolltop3s=scrolltop3d+(scrolltop3-scrolltop3d)/1000*i;
div3.style.backgroundPosition = "0% " + scrolltop3s + "px";
} }
if (scrolltop4 > -720) {
for(i=0;i<1000;i++) {
scrolltop4s=scrolltop4d+(scrolltop4-scrolltop4d)/1000*i;
div4.style.backgroundPosition = "0% " + scrolltop4s + "px";
}
}
if (scrolltop5 > -720) {
for(i=0;i<1000;i++) {
scrolltop5s=scrolltop5d+(scrolltop5-scrolltop5d)/1000*i;
div5.style.backgroundPosition = "0% " + scrolltop5s + "px";
}
}
scrolltop1d=scrolltop1;
scrolltop2d=scrolltop2;
scrolltop3d=scrolltop3;
scrolltop4d=scrolltop4;
scrolltop5d=scrolltop5;
}
}
</script>
</body>
</html>