js鼠标兼容所有浏览器滚动事件源码下载

当前位置：首页 > 代码实例 > html5 css3代码分类 > 其他 > js鼠标兼容所有浏览器滚动事件源码下载

普通的鼠标按键不多，左右键和中键可以滚动的键，对于左右两键事件可能更为熟悉一些，中键滚动事件则相对较为陌生，并且存在着很大的浏览器兼容性问题，下面就通过代码实例介绍一下兼容所有主流浏览器的中键滚动事件，希望能够给需要的朋友带来帮助。

代码如下:

[ 其他 ] 运行代码下载代码

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<meta name="author" content="https://www.51qianduan.com/" /> 
<title>51前端</title> 
<script type="text/javascript"> 
var width=350;
var height=250;
var wheel=function(event){  
  var delta=0;  
  if(!event){
    event=window.event;
  }
  if(event.wheelDelta){
    delta=event.wheelDelta/120;  
  } 
  else if(event.detail){  
    delta=-event.detail/3;  
  }  
  if(delta){handle(delta);} 
  if(event.preventDefault){event.preventDefault();}  
  event.returnValue = false;  
}  
  
if(window.addEventListener){  
  window.addEventListener('DOMMouseScroll',wheel,false);  
}  
window.onmousewheel=document.onmousewheel=wheel;  
  
var handle=function(delta){  
  var theimage=document.getElementById("theimage");  
  width=width+delta*10;
  height=height+delta*10;
  theimage.style.width=width+"px";
  theimage.style.height=height+"px";
}  
</script>
</head>
<body>
<div><img src="mytest/js/small.jpg" id="theimage"></div>
</body>
</html>

代码描述：js鼠标兼容所有浏览器滚动事件。js鼠标兼容所有浏览器滚动事件源码下载

下载全部收藏

124 166

用户评论

大牛，别默默的看了，快登录帮我点评一下吧！:) 登录 | 注册