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/



开博第一篇作品-C#winform版《仿360杀毒》页面切换动画效果(内含源码)

C#winform版 《仿360杀毒》页面切换动画效果 昨天跟一个同事聊天,谈到了360杀毒的页面效果不错,我们所做的winform页面都是拖控件还是拖控件,不能吸引客户的注意力,想改成360的样...
  • chiyumaomao
  • chiyumaomao
  • 2015年08月24日 16:27
  • 3520

js项目--多张图片显示出3D的效果(360度旋转)

一共有77张图片,通过鼠标可以将它们旋转.可以用左右键控制旋转.可以用button控制它们自动旋转....
  • xingguanghui_1134
  • xingguanghui_1134
  • 2016年09月10日 16:23
  • 2813

解决360浏览器兼容模式的页面显示问题

 (我比较纳闷,360的兼容模式这么狗屎,为什么还有存在的必要性……) 由于众所周知的情况,国内的主流浏览器都是双核浏览器:基于Webkit内核用于常用网站的高速浏览。基于IE的内核用于兼容网...
  • fire588699
  • fire588699
  • 2015年09月17日 15:10
  • 1412

360换机助手

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

响铃:主打拍照的手机厂商们,换机时代能否自救?

近日微博上有网友放出了一支视频,视频中的美图手机新品M6具备了一项特别奇葩的功能:宠物美颜!如今手机市场竞争日趋白热化,在洋品牌节节败退的情况下,国产手机正尝试深挖细分市场需求,寻找错位竞争机会。但随...
  • sinat_32970179
  • sinat_32970179
  • 2016年05月22日 16:11
  • 8315

换机和路由器设置,交换机配置及命令模式

  • 2011年07月17日 22:41
  • 297KB
  • 下载

换机程序!sfdgdfgdgwrerfesadf

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

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

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

思科交 换机常识学习

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

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

Camera360作为国内Android平台最受欢迎的手机拍照应用,6月份开始进军iOS平台,5个月后今天,推出了支持实时预览功能的V2.0版。之前雷锋网也对其做过评测。Camera360工作人员介绍...
  • leiphone
  • leiphone
  • 2011年11月30日 17:19
  • 1133
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:360换机特效
举报原因:
原因补充:

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