通过一个小例子来介绍鼠标的滚轮事件，通过鼠标向上滚动来放大图片，向下滚动来缩小图片
下面是HTML文档
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚轮练习</title>
<style type="text/css">
img{
width: 200px;
}
</style>
</head>
<body>
<img src="2.jpg">
</body>
<script type="text/javascript" src="mousewheel.js"></script>
<script type="text/javascript">
var img=document.getElementsByTagName("img")[0];
var scales=1;
wheel(img,function (value){
if(value){
if(scales<4){
scales+=0.1;
img.style.transform="scale("+scales+")";
}
}else{
if(scales>0.4){
scales-=0.1;
img.style.transform="scale("+scales+")";
}
}
})
</script>
</html>
下面是封装的滚轮事件
//onmousewheel;针对于非火狐浏览器
// 向上滚动是负值
//火狐浏览器滚动方式
// 向上滚动是正值
//封装函数返回向上或者向下
function wheel(obj,callback){
// 标记当前是向上还是向下
var down=false;
//判断浏览器是不是火狐
var str=window.navigator.userAgent;
if(str.indexOf("Firefox")!=-1){
obj.addEventListener("DOMMouseScroll",function(e){
var ev=e || window.event;
if(ev.detail<0){
down=true;
}else{
down=false;
}
callback(down);
},false);
}else{
obj.onmousewheel=function(e){
var ev=e || window.event;
if(ev.wheelDelta<0){
down=false;
}else{
down=true;
}
// 函数回调 将正确的方向结果返回给前面
callback(down);
}
}
return down;
}
运行结果如下：
原图：
11722CA8-4E5D-477E-B7A3-574B3CEEC61E.png
向上滚动放大图片：
B1EAD300-C076-4CBD-A07E-2D78FB1A8B15.png
向下缩小图片：
15EEBA67-DA68-4E7A-9738-06467BFB85CF.png
通过这个函数就可以对图片进行处理了，这个函数可以作为一个插件用来对网页中使用到滚轮事件的地方。
网友评论