<!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;
}
// 簡化上一段函數(shù)代碼
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是作為參數(shù)來接受傳進來的函數(shù)
apply()是一種方法,可以將外界需要用到的參數(shù)附加給fn方法
*/
return false;
}
}
