360换机特效

转载 2015年11月18日 11:22:12




    博客分类: 


实现的效果:

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

 

官网图:

  
  

实现的效果图:

 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/



相关文章推荐

360换机助手

  • 2015年02月09日 13:06
  • 3.3MB
  • 下载

支持实时特效功能, Camera360 for iPhone V2.0新版发布

Camera360作为国内Android平台最受欢迎的手机拍照应用,6月份开始进军iOS平台,5个月后今天,推出了支持实时预览功能的V2.0版。之前雷锋网也对其做过评测。Camera360工作人员介绍...

换机程序!sfdgdfgdgwrerfesadf

  • 2011年03月03日 18:47
  • 655KB
  • 下载

多路通程控电话换机说明书

  • 2010年06月18日 08:44
  • 61KB
  • 下载

模仿实现360桌面水晶球式的一键清理特效

半年前,鄙人想搞一下 android一键清理的特效,于是乎研究了一下市面上各个产品的界面效果,发现360桌面的水晶球效果很细腻,所以就试着模仿了一下。今天翻阅以前写的代码,刚好看到了它,所以就想把它分...

思科交 换机常识学习

  • 2011年04月11日 21:53
  • 31KB
  • 下载

360转的js图片特效

  • 2014年11月11日 17:49
  • 435KB
  • 下载

使用QSnipps和360云盘实现多机代码片段采集

一。前言         一直以来都想找个工具,能方便的保存代码片段,这样在做新的项目时,一些代码就能重用了。而且代码片段往往都比较小,几十行的东西,没兴趣搞成dll或是lib之类的。而且有些时候也...

仿360热搜Js特效

  • 2015年05月06日 08:48
  • 180KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:360换机特效
举报原因:
原因补充:

(最多只允许输入30个字)