描述：实现
鼠标滚动时（向下），div变高，向上，变短
onmousewheel 鼠标滚轮事件，但火狐中不支持
火狐中使用DOMMouseScroll来绑定滚动事件
该事件通过addEventListener()函数来绑定 event.wheelDelta来获取鼠标滚轮滚动的方向,向上滚是120,乡下滚是-120，火狐中不支持
火狐中使用event.detail,向上滚是-3，向下滚是+3
js代码：
window.onload = function(){
var box13 = document.getElementById("box13");
box13.onmousewheel = function(event){
event = event || window.event;
if(event.wheelDelta<0 || event.detail>0){
box13.style.height = box13.clientHeight + 20+"px";
}else{
box13.style.height = box13.clientHeight - 20+"px";
if(box13.clientHeight<20){
box13.style.height = 20+"px";
}
}
/*
当滚轮滚动时，浏览器如果有滚动条，会随之滚动，
这是浏览器默认行为，如果想取消，return false;
* */
event.preventDefault && event.preventDefault();
return false;
};
bind(box13,"DOMMouseScroll",box13.onmousewheel);
/* 使用addEventListener()时，取消默认行为不能用return false;
应该使用 event.preventDefault();IE8不支持
* */
};
function bind(obj,eventStr,callback){
if(obj.addEventListener){
obj.addEventListener(eventStr,callback,false);
}else{
//调整this的调用对象，让他都指向调用它的对象，使用callback.call(obj)
//IE8及以下
//obj.attachEvent("on"+eventStr,callback);
obj.attachEvent("on"+eventStr,function(){
callback.call(obj);//由obj调用了
});
}
}
html代码：
<body>
<div id="box13"></div>
</body>
扫一扫
128
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
