鼠标滚轮事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鼠标滚轮</title>
<style type="text/css">
div{width: 200px;height: 200px;background: #f00;}
</style>
</head>
<script>
window.onload=function (){
var oDiv=document.getElementsByTagName('div')[0];
/*
鼠标滚轮事件
IE、chrome onmousewheel
event.wheelDalta 数字类型的返回值
向上:120
向下:-120
ff DOMMouseScroll 只能通过事件监听添加
event.detail 数字类型的返回值
向上:-3
向下: 3
return false阻止的是第一种绑定方式( obj.on事件名称=fn )所触发的默认行为
addEventListener绑定的事件需要通过event下面的preventDefault()来阻止默认行为
*/
oDiv.onmousewheel=fn;
if (oDiv.addEventListener){
oDiv.addEventListener('DOMMouseScroll',fn, false);
}
function fn(ev) {
var ev = ev || event;
// alert( ev.wheelDelta );
// alert(ev.detail)
//对鼠标滚轮上下值的兼容性处理
var b = true;
if (ev.wheelDelta) {
b = ev.wheelDelta > 0 ? true : false;
} else {
b = ev.detail < 0 ? true : false;
}
if(b){
oDiv.style.height=oDiv.offsetHeight+10+'px';
}else{
oDiv.style.height=oDiv.offsetHeight-10+'px';
}
//阻止默认行为
if (ev.preventDefault){
ev.preventDefault();
}
return false;
}
};
</script>
<body style="height:2000px">
<div></div>
</body>
</html>