<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滚轮控制图片大小</title>
<style>
#img{
position: absolute;
left: 100px;
top:100px;
}
</style>
</head>
<body>
<img id="img" src="img/1.jpg" alt="">
</body>
<script src="js/mouseWheel.js"></script>
<script>
// 获取元素
var img=document.getElementById('img');
mouseWheel(img,function(event,down){
if (down) {
this.style.width=this.offsetWidth+2+"px";
this.style.height=this.offsetHeight+2+"px";
}else{
this.style.width=this.offsetWidth-2+"px";
this.style.height=this.offsetHeight-4+"px";
}
});
</script>
</html>
js部分
/*
@author Henry Zhang
@date 2016-008-02
@version 01(版本)
*/
function mouseWheel(obj,fn){
// 获取是不是ff浏览器
var ff=navigator.userAgent.indexOf("Firefox");
// 判断浏览器类型
if (ff!=-1) {
// 为box添加滚轮事件
obj.addEventListener('DOMMouseScroll',wheel,false);
}else{
obj.onmousewheel=wheel;
}
// 简化上一段函数代码
function wheel(event){
var event=event||window.event;
var down=true;
if (event.detail) {
down=event.detail>0;
}else{
down=event.wheelDelta<0;
}
console.log(down);
fn.apply(obj,[event,down]);
/*
注释:fn是作为参数来接受传进来的函数
apply()是一种方法,可以将外界需要用到的参数附加给fn方法
*/
return false;
}
}
网友评论