1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>JavaScript onmousewheel鼠标滚轮示例</title> 6 <style> 7 #div1 { 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>