关闭

360换机特效

193人阅读 评论(0) 收藏 举报




    博客分类: 


实现的效果:

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

 

官网图:

  
  

实现的效果图:

 1. 
 

 2.

 
 

 

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


 代码:

 

Html代码  收藏代码
  1. <!doctype html>  
  2. <html>  
  3. <head>  
  4.   
  5.   <meta charset="gbk"/>  
  6.   <title>360换机</title>  
  7.   
  8. <style>  
  9. /*去掉白边的*/  
  10. *{padding:0;margin:0;}  
  11.   
  12. html,body,#content{  
  13. width:100%;  
  14. height:100%;  
  15. }  
  16. .size{  
  17.  width:100%;height:100%;  
  18. }  
  19. .div1{  
  20.  background:url("img/1.jpg") center fixed;  
  21. }  
  22. .div2{  
  23.  background:url("img/2.jpg") center fixed;  
  24. }  
  25. .div3{  
  26.  background:url("img/3.jpg") center fixed;  
  27. }  
  28. .div4{  
  29.  background:url("img/4.jpg") center fixed;  
  30. }  
  31.   
  32. #photo{  
  33. width:100px;  
  34. height:325px;  
  35. top:30%;  
  36. left:60px;  
  37. position:fixed;  
  38. background:url("img/nav.png") no-repeat;  
  39. }  
  40.   
  41. #photo ul{  
  42. list-style:none;  
  43. font-size:15px;  
  44. margin-top:10px;  
  45.   
  46. }  
  47.   
  48. #photo ul li{  
  49. margin-bottom:55px;  
  50. padding-left:30px;  
  51. line-height:21px;  
  52. Color:white;  
  53. }  
  54. #photo ul li.cho{  
  55. background:url("img/nav_cur.png") no-repeat 0 0;  
  56.   
  57. }  
  58.   
  59. </style>  
  60. <script src="js/jquery1.42.min.js">  
  61. </script>  
  62.   
  63. </head>  
  64.   
  65.   
  66. <body>  
  67.   <div id="content">  
  68.      <div class="div1 size"></div>  
  69.      <div class="div2 size"></div>  
  70.      <div class="div3 size"></div>  
  71.      <div class="div4 size"></div>  
  72.   </div>  
  73.     
  74.     <!--左侧状态栏-->  
  75.   <div id="photo">  
  76.       <ul>  
  77.       <li class="cho">安全换机</li>  
  78.       <li>无网对传</li>  
  79.       <li>隐私粉碎</li>  
  80.       <li>一键刷机</li>  
  81.     </ul>  
  82.   </div>  
  83.   <!--左侧导航栏end-->  
  84. </body>  
  85.   
  86. </html>  
  87. <script>  
  88.  window.onload=function(){  
  89.    
  90.     $(window).scroll(function(){  
  91.         var n=$(window).scrollTop()/$(window).height();  
  92.          $("#photo ul li").eq(n).addClass("cho").siblings().removeClass("cho");  
  93.       
  94.     })  
  95.    
  96.    
  97.  }  
  98.   
  99.   
  100. </script>  

 


 实现的巧妙之处在于:把那个绿色的小点的图片放在<li>标签中,然后根据n(第几个屏)的和第几个<li>标签进行比较.
 

 

影音先锋电影 http://www.iskdy.com/



0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:139569次
    • 积分:2166
    • 等级:
    • 排名:第18118名
    • 原创:0篇
    • 转载:504篇
    • 译文:0篇
    • 评论:6条
    文章存档