使用onmousewheel 随鼠标的滚动改变大小
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> #box{ margin: 100px auto; width: 100px; height: 100px; background-color: #00FFFF; } </style> <script type="text/javascript"> window.onload = function(){ var box = document.getElementById("box"); box.onmousewheel = function(event){ //event.wheelDelta火狐中不支持 if(event.wheelDelta >0){ //向上滚 box.style.height = box.clientHeight - 5 + "px"; } else{ //向下滚 box.style.height = box.clientHeight + 5 + "px"; } return false; //取消默认行为 火狐不能使用 // 当也网页界面有滚动条是需要取消浏览器的默认行为 } } </script> </head> <body style="height: 2000px;"> <div id="box"></div> </body> </html>此方法不兼容火狐 如果兼容火狐的话需要另作改进
