360换机特效

最新推荐文章于 2022-07-14 19:10:33 发布

dotedy

最新推荐文章于 2022-07-14 19:10:33 发布

阅读量453

点赞数

博客分类：

实现的效果:

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

官网图:

实现的效果图:

伦理片 http://www.dotdy.com/

代码:

     Html代码  
     
    
 <!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://www.iskdy .com/