欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

鼠标滑轮 js绑定事件(转帖) 博客分类: Web前端之js 滑轮滚动 

程序员文章站 2024-03-16 12:24:28
...
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         var scrollFunc = function (e) {  
  8.         e = e || window.event;  
  9.         if (e.wheelDelta) {  //判断浏览器IE,谷歌滑轮事件               
  10.             if (e.wheelDelta > 0) { //当滑轮向上滚动时  
  11.                 alert("滑轮向上滚动");  
  12.             }  
  13.             if (e.wheelDelta < 0) { //当滑轮向下滚动时  
  14.                 alert("滑轮向下滚动");  
  15.             }  
  16.         } else if (e.detail) {  //Firefox滑轮事件  
  17.             if (e.detail> 0) { //当滑轮向上滚动时  
  18.                 alert("滑轮向上滚动");  
  19.             }  
  20.             if (e.detail< 0) { //当滑轮向下滚动时  
  21.                 alert("滑轮向下滚动");  
  22.             }  
  23.         }  
  24.     }  
  25.     //给页面绑定滑轮滚动事件  
  26.     if (document.addEventListener) {//firefox  
  27.         document.addEventListener('DOMMouseScroll', scrollFunc, false);  
  28.     }  
  29.     //滚动滑轮触发scrollFunc方法  //ie 谷歌  
  30.     window.onmousewheel = document.onmousewheel = scrollFunc;   
  31.     </script>  
  32. </head>  
  33. <body>  
  34.     <div style="height:2000px;width:200px;background:#333;"></div>  
  35. </body>  
  36. </html>  
  37. 转帖地址:http://blog.csdn.net/kongjiea/article/details/18557407
相关标签: 滑轮滚动