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>
