元素会根据滚轮的滚动改变大小,具体解释在代码中有注释,以及浏览器兼容问题都有解决
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
height: 100px;
width: 100px;
background-color: red;
}
body{
height: 2000px;
}
</style>
<script type="text/javascript">
window.onload=function(){
/*当鼠标滚轮向下滚动时,box1边长
* 当鼠标滚轮向下滚动时,box1变短
*
*/
var box1=document.getElementById("box1");
box1.onmousewheel=function(event){
event=event||window.event;
/*判断滚轮滚动方向*/
//event.wheelDela 可以获取鼠标滚轮滚动方向
//向上滚120 向下滚-120,但火狐不支持此方法
/*
在火狐中用event.detail来获取滚动方向
向上滚-3,向下滚3
* */
if(event.wheelDelta > 0 || event.detail < 0){
//向上滚,box1变短
box1.style.height = box1.clientHeight-10+"px";
}else{
//向下滚box1变长
box1.style.height = box1.clientHeight+10+"px";
}
/*由于IE8不支持此方法,所以用以下语句有就用没有就不用*/
event.preventDefault && event.preventDefault();
return false;
};
/*绑定鼠标滚轮滚动事件*/
/*
* 火狐不支持onmousewheel
* 火狐中需使用DOMMouseScroll来绑定滚动事件
* 需要通过addEventListener()函数来绑定
*
* */
bind(box1,"DOMMouseScroll",box1.onmousewheel);
/*当浏览器有滚动条时,滚轮滚动会随之滚动,这是浏览器的默认样式*/
//return false;可以取消默认样式
//但是火狐使用的是addEventListener()方法绑定响应函数,取消默认行为时不能使用return false;
//可以用event.preventDefault()取消默认行为
};
function bind(obj,eventStr,callback){
if(obj.addEventListener){
obj.addEventListener(eventStr,callback,false);
}else{
obj.attachEvent("on"+enentStr,function(){
callback.call(obj);
});
}
};
</script>
</head>
<body >
<div id="box1"></div>
</body>
</html>