八零在线优社区

 找回密码
 帐号注册

QQ登录

只需一步,快速开始

搜索
热搜: PhotoShop
查看: 160|回复: 0

[javascript] 鼠标滚轮事件代码案例之改变DIV高度

[复制链接]
发表于 2015-9-15 21:26:52 | 显示全部楼层 |阅读模式
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>鼠标滚轮事件代码案例之改变DIV高度</title>
  6. <style>
  7. #div1 {width: 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 表明mouse向上滚动
  21.                         下:-120 表明mouse向下滚动
  22.                
  23.         firefox : DOMMouseScroll 必须用addEventListener绑定鼠标滚轮事件
  24.                 event.detail
  25.                         上:-3 表明mouse向上滚动
  26.                         下:3 表明mouse向下滚动
  27.                        
  28.         return false阻止的是  obj.on事件名称=fn 所触发的默认行为和IE下的attachEvent绑定事件
  29.         addEventListener绑定的事件需要通过event下面的preventDefault()阻止默认事件;
  30.         */
  31.         oDiv.onmousewheel = fn;
  32.        
  33.         if (oDiv.addEventListener) {
  34.                 oDiv.addEventListener('DOMMouseScroll', fn, false);
  35.         }

  36.        
  37.         function fn(ev) {
  38.                
  39.                 var ev = ev || event;

  40.                
  41.                 var b = true;
  42.                
  43.                 if (ev.wheelDelta) {
  44.                         b = ev.wheelDelta > 0 ? true : false;
  45.                 } else {
  46.                         b = ev.detail < 0 ? true : false;
  47.                 }
  48.                
  49.                 //alert(b);
  50.                
  51.                 if ( b ) {
  52.                         this.style.height = this.offsetHeight - 10 + 'px';
  53.                 } else {
  54.                         this.style.height = this.offsetHeight + 10 + 'px';
  55.                 }
  56.                
  57.                 if (ev.preventDefault) {
  58.                         ev.preventDefault();
  59.                 }
  60.                
  61.                 return false;
  62.                
  63.         }
  64.        
  65.         /*document.oncontextmenu = function() {
  66.                 return false;
  67.         }*/
  68.         /*
  69.         document.attachEvent('oncontextmenu', function() {
  70.                 return false;
  71.         });
  72.         */
  73.         /*document.addEventListener('contextmenu', function(ev) {
  74.                
  75.                 ev.preventDefault();
  76.                 //return false;
  77.         });*/
  78.        
  79. }
  80. </script>
  81. </head>

  82. <body style="height: 2000px;">
  83.         <div id="div1"></div>
  84. </body>
  85. </html>
复制代码


回复

使用道具 举报

您需要登录后才可以回帖 登录 | 帐号注册

本版积分规则

QQ|小黑屋|手机版|八零在线优社区 ( 赣ICP备15001736号-2 )

GMT+8, 2018-2-18 04:58

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表