您的位置：首页 > 其它

鼠标滚轮事件

2016-11-06 21:06 162 查看

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div1{
width: 100px;
height: 100px;
background: red;
}
</style>
</head>
<body>
<div id="div1"></div>
<script type="text/javascript">
var oDiv=document.getElementById("div1");

// ie/chrome:onmousewheel  滚动方向：event.wheelDelta  下：-120； 上：120
oDiv.onmousewheel=fn;

// firefox:DOMMouseScroll 必须用AddEventListener  滚动方向：event.detail   下：3； 上：-3
if (oDiv.addEventListener) {
oDiv.addEventListener('DOMMouseScroll',fn,false);
}

function fn(ev){
var ev = ev || event;
var b=true;
if (ev.wheelDelta) {
b=ev.wheelDelta > 0 ? true : false;
}else{
b=ev.detail < 0 ? true : false;
}

if ( b ) {
this.style.height=this.offsetHeight - 10 +'px';
}else{
this.style.height=this.offsetHeight + 10 +'px';
}

// 阻止 obj.addEventListener(事件名称，时间函数，是否捕获) 形式的事件默认行为
if (ev.preventDefault) {
ev.preventDefault();
}

// 阻止 obj.事件名称=事件函数 和 obj.attachEvent(事件名称，事件函数) 形式的事件默认行为
return false;
}
</script>
</body>
</html>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： 鼠标滚轮事件

相关文章推荐

新的分享

章节导航