JavaScript onmousewheel鼠标滚轮示例

最新推荐文章于 2022-07-11 17:20:30 发布

weixin_30660027

最新推荐文章于 2022-07-11 17:20:30 发布

阅读量88

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ysx215/p/8352285.html

版权

 1 <!doctype html>  
 2 <html>  
 3 <head>  
 4 <meta charset="utf-8">  
 5 <title>JavaScript onmousewheel鼠标滚轮示例</title>  
 6 <style>  
 7 #div1 { width:100px; height:100px; background-color:#005812}  
 8 </style>  
 9 <script>  
10 window.onload = function(){  
11     var oDiv = document.getElementById('div1');  
12     oDiv.onmousewheel = fn;  
13       
14     if(oDiv.addEventListener){  
15         oDiv.addEventListener('DOMMouseScroll',fn,false);  
16     }  
17     function fn(ev){  
18         var ev = ev || event;  
19         var b = true;  
20         if(ev.wheelDelta){  
21             b = ev.wheelDelta > 0 ? true : false;  
22             }else{  
23                 b = ev.detail < 0 ? true : false;  
24                 }  
25         if(b){  
26             if(this.offsetHeight < 500){  
27                 this.style.height = this.offsetHeight + 10 + 'px';  
28                 };  
29             }else{  
30                 if(this.offsetHeight > 10){  
31                     this.style.height = this.offsetHeight - 10 + 'px';  
32                 }  
33             }  
34         if(ev.preventDefault){  
35             ev.preventDefault();  
36             }  
37         return false;  
38         }  
39 }  
40 </script>  
41 </head>  
42 <body>  
43 <div id="div1"></div>  
44 </body>  
45 </html>