360换机主页:
? ?http://huanji.360.cn/
实现的效果:
? ?随着滚动轮的滚动，进行背景图片的切换，还有那个绿色的小点的切换.
?
官网图:
??
??
实现的效果图:
?1.?
?
?2.
?
?
?
?......
?
?代码:
?
<!doctype html>
<html>
<head>
<meta charset="gbk"/>
<title>360换机</title>
<style>
/*去掉白边的*/
*{padding:0;margin:0;}
html,body,#content{
width:100%;
height:100%;
}
.size{
width:100%;height:100%;
}
.div1{
background:url("img/1.jpg") center fixed;
}
.div2{
background:url("img/2.jpg") center fixed;
}
.div3{
background:url("img/3.jpg") center fixed;
}
.div4{
background:url("img/4.jpg") center fixed;
}
#photo{
width:100px;
height:325px;
top:30%;
left:60px;
position:fixed;
background:url("img/nav.png") no-repeat;
}
#photo ul{
list-style:none;
font-size:15px;
margin-top:10px;
}
#photo ul li{
margin-bottom:55px;
padding-left:30px;
line-height:21px;
Color:white;
}
#photo ul li.cho{
background:url("img/nav_cur.png") no-repeat 0 0;
}
</style>
<script src="js/jquery1.42.min.js">
</script>
</head>
<body>
<div id="content">
<div class="div1 size"></div>
<div class="div2 size"></div>
<div class="div3 size"></div>
<div class="div4 size"></div>
</div>
<!--左侧状态栏-->
<div id="photo">
<ul>
<li class="cho">安全换机</li>
<li>无网对传</li>
<li>隐私粉碎</li>
<li>一键刷机</li>
</ul>
</div>
<!--左侧导航栏end-->
</body>
</html>
<script>
window.onload=function(){
$(window).scroll(function(){
var n=$(window).scrollTop()/$(window).height();
$("#photo ul li").eq(n).addClass("cho").siblings().removeClass("cho");
})
}
</script>
?
?实现的巧妙之处在于:把那个绿色的小点的图片放在<li>标签中，然后根据n(第几个屏)的和第几个<li>标签进行比较.
?
?
原文：http://cb123456.iteye.com/blog/2254973