zoukankan      html  css  js  c++  java
  • 鼠标滚动

     1 <!DOCTYPE HTML>
     2 <html>
     3 <head>
     4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
     5 <title>无标题文档</title>
     6 <style>
     7 #div1 { 100px; height: 100px; background: red;}
     8 </style>
     9 <script>
    10 /*
    11 鼠标滚轮事件
    12 */
    13 window.onload = function() {
    14     
    15     var oDiv = document.getElementById('div1');
    16     
    17     /*
    18     ie/chrome : onmousewheel
    19         event.wheelDelta
    20             上:120
    21             下:-120
    22         
    23     firefox : DOMMouseScroll 必须用addEventListener
    24         event.detail
    25             上:-3
    26             下:3
    27             
    28     return false阻止的是  obj.on事件名称=fn 所触发的默认行为
    29     addEventListener绑定的事件需要通过event下面的preventDefault();
    30     */
    31     oDiv.onmousewheel = fn;
    32     
    33     if (oDiv.addEventListener) {
    34         oDiv.addEventListener('DOMMouseScroll', fn, false);
    35     }
    36     
    37     //alert(2);
    38     
    39     function fn(ev) {
    40         //alert(1);
    41         
    42         var ev = ev || event;
    43         
    44         //alert( ev.wheelDelta );
    45         
    46         //alert(ev.detail)
    47 
    48         //兼容的鼠标滚动处理 true 为 向上滚动   false 为向下滚动
    49         
    50         var b = true;
    51         
    52         if (ev.wheelDelta) {
    53             b = ev.wheelDelta > 0 ? true : false;
    54         } else {
    55             b = ev.detail < 0 ? true : false;
    56         }
    57         
    58         //alert(b);
    59         //控制一个div的高度
    60         if ( b ) {
    61             this.style.height = this.offsetHeight - 10 + 'px';
    62         } else {
    63             this.style.height = this.offsetHeight + 10 + 'px';
    64         }
    65         
    66         if (ev.preventDefault) {
    67             ev.preventDefault();  //火狐下阻止默认事件 , 因为其事件是通过第二种方式绑定,所以 retufn false 无效。
    68         }
    69         
    70         return false; //阻止默认事件
    71         
    72     }
    73     
    74     /*document.oncontextmenu = function() {
    75         return false;
    76     }*/
    77     
    78     //给火狐绑定鼠标滚轮事件
    79     document.attachEvent('oncontextmenu', function() {
    80         return false;
    81     });
    82     
    83     /*document.addEventListener('contextmenu', function(ev) {
    84         
    85         ev.preventDefault();
    86         //return false;
    87     });*/
    88     
    89 }
    90 </script>
    91 </head>
    92 
    93 <body style="height: 2000px;">
    94     <div id="div1"></div>
    95 </body>
    96 </html>
  • 相关阅读:
    WampServer Mysql配置
    Java实现 蓝桥杯VIP 算法提高 陶陶摘苹果2
    Java实现 蓝桥杯VIP 算法提高 陶陶摘苹果2
    Java实现 蓝桥杯VIP 算法提高 陶陶摘苹果2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 质因数2
    Java实现 蓝桥杯VIP 算法提高 前10名
  • 原文地址:https://www.cnblogs.com/wanqiu/p/4459825.html
Copyright © 2011-2022 走看看