javascript滚轮事件基础实例讲解（37）
本文实例为大家分享了js滚轮事件的具体代码，供大家参考，具体内容如下
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">
#box1{
width:100px;
height:100px;
background-color:red;
}
</style>
<scripttype="text/javascript">
window.onload=function(){
//使div可以跟随鼠标滚轮滚动来改变高度
//滚轮向下滚，div变高滚轮向上滚div变短
//获取box1
varbox1=document.getElementById("box1");
/*
*onmousewheel
*-鼠标滚轮滚动的事件，但是该事件火狐浏览器并不支持
*-在火狐中需要使用DOMMouseScroll，这个事件只能通过addEventListener()来绑定
*/
//为box1绑定一个鼠标滚轮滚动的事件
box1.onmousewheel=function(event){
event=event||window.event;
//判断滚轮滚动的方向
/*
*wheelDelta
*-事件对象中的属性，可以用来判断鼠标滚轮滚动的方向
*-向下滚-120向上滚+120
*-该属性的值并不重要，重要的是值的符号，需要通过符号来判断滚动的方向
*-但是该属性火狐浏览器并不支持
*/
//alert(event.wheelDelta);
/*
*火狐中通过detail来判断方向
*-向上滚-3向下滚+3
*/
//alert(event.detail);
if(event.wheelDelta<0||event.detail>0){
//向下滚
//增加box1的高度
box1.style.height=box1.offsetHeight+10+"px";
}else{
//向上滚
//减小box1的高度
box1.style.height=box1.offsetHeight-10+"px";
}
/*
*使用addEventListener()绑定的事件，不能通过returnfalse来取消默认行为
*需要调用事件对象preventDefault()方法来取消默认行为
*但是在IE8中没有该方法
*/
event.preventDefault&&event.preventDefault();
//当页面中有滚动条时，由于滚轮滚动的默认行为会导致页面整体下移
//取消默认行为
returnfalse;
};
bind(box1,"DOMMouseScroll",box1.onmousewheel);
};
functionbind(obj,eventStr,callback){
if(obj.addEventListener){
//如果是正常浏览器
obj.addEventListener(eventStr,callback,false);
}else{
//IE8
obj.attachEvent("on"+eventStr,function(){
callback.call(obj);
});
}
}
</script>
</head>
<bodystyle="height:3000px;">
<divid="box1"></div>
</body>
</html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。