鼠标滚轮事件---兼容火狐 

  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.

posted @ 2016-09-29 21:56  wrestle-mania  阅读(1064)  评论(0)  编辑  收藏  举报