360换机特效

Cb123456

浏览: 66198 次
性别:
来自: 西安

最近访客更多访客>>

没什么结局

zzgiser

_Amazing

泪痕崔

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

css3 360换机特效

360换机主页:

http://huanji.360.cn/

实现的效果:

随着滚动轮的滚动，进行背景图片的切换，还有那个绿色的小点的切换.

官网图:

实现的效果图:

......

代码:

<!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>标签进行比较.