首页 > 代码库 > 鼠标滚轮事件---兼容火狐
鼠标滚轮事件---兼容火狐
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <style> 7 *{ 8 margin:0; 9 padding:0; 10 } 11 html,body{ 12 width:100%; 13 height:100%; 14 position: relative; 15 overflow: hidden; 16 } 17 #page{ 18 position:absolute; 19 width:100%; 20 height:100%; 21 top:0; 22 left:0; 23 } 24 #page li{ 25 width:100%; 26 height:100%; 27 } 28 #page li:first-child{ 29 background: red; 30 } 31 #page li:nth-child(2){ 32 background: blue; 33 } 34 #page li:nth-child(3){ 35 background: orange; 36 } 37 #page li:last-child{ 38 background: pink; 39 } 40 #round{ 41 position: fixed; 42 top:30%; 43 right:100px; 44 } 45 #round li{ 46 list-style: none; 47 margin:20px; 48 width:20px; 49 height:20px; 50 border-radius: 50%; 51 background: yellow; 52 border:5px solid #fff; 53 } 54 </style> 55 <script src="http://apps.bdimg.com/libs/jquery/1.6.4/jquery.min.js"></script> 56 </head> 57 <body> 58 <ul index="0" id="page"> 59 <li>111</li> 60 <li>222</li> 61 <li>333</li> 62 <li>444</li> 63 </ul> 64 <ul id="round"> 65 <li></li> 66 <li></li> 67 <li></li> 68 <li></li> 69 </ul> 70 </body> 71 <script> 72 $(‘#page‘).bind(‘mousewheel DOMMouseScroll‘,function(e){ 73 var whd = e.originalEvent.wheelDelta ? e.originalEvent.wheelDelta : e.originalEvent.detail; 74 var dir = whd > 0 ? 1 : 0; 75 var index = $(‘#page‘).attr(‘index‘); 76 var len = $(‘#page li‘).length - 1; 77 if(dir){ 78 if(--index < 0){ 79 return; 80 } 81 } 82 else{ 83 if(++index > len){ 84 return; 85 } 86 } 87 if(!$(this).is(‘:animated‘)){ 88 $(this).animate({‘top‘:‘-‘ + index + ‘00%‘},500); 89 $(this).attr(‘index‘,index); 90 } 91 }) 92 $(‘#round li‘).each(function(){ 93 $(this).click(function(){ 94 $(‘#page‘).attr(‘index‘,$(this).index()); 95 var index = $(‘#page‘).attr(‘index‘); 96 if(!$(‘#page‘).is(‘:animated‘)){ 97 $(‘#page‘).animate({‘top‘:‘-‘ + index + ‘00%‘},500); 98 $(‘#page‘).attr(‘index‘,index); 99 }100 })101 })102 </script>103 </html>
不是很确定是不是对的，但是功能上好像已经实现了。原生的已经忘完了，也或许本来就不会，哈哈。
之前自己在网上找代码的时候，总希望全部复制粘贴然后运行就能出效果，可是很少，Now my trun,my rule,hh.
鼠标滚轮事件---兼容火狐
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。