<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>滾輪事件</title>
<style>
*{margin:0;padding:0;}
#box{
width: 400px;
height: 400px;
/*padding-top: 20px;*/
margin: 20px auto 0;
border: 2px solid #ccc;
/*box-sizing:border-box;*/
text-indent: 1rem;
}
</style>
</head>
<body>
<div id="box">
<p>我喜歡的話。</p><br>
<p>我更喜歡的話</p><br>
<p>滑動(dòng)滾輪</p>
</div>
</body>
<script src="js/mouseWheel.js"></script>
<script>
// 獲取元素
var box=document.getElementById('box');
mouseWheel(box,function(event,down){
// 獲取當(dāng)前元素對(duì)象的寬度和高度
var width=this.offsetWidth;
var height=this.offsetHeight;
//判斷當(dāng)前的方向
if (down) {
// 確定是向下滑動(dòng)后,繼續(xù)判斷,判斷當(dāng)前寬度是否大于500
if (width>=500&&height>=500) {
// 限定寬高
width=500;
height=500;
}else{
// 否則就讓寬和高往上增長(zhǎng)
this.style.width=width+1+"px";
this.style.height=height+1+"px";
}
// 否則當(dāng)前的方向是往上滑
}else{
// 確定是向上滑動(dòng)后,限定一個(gè)寬高
if (width<=300&&height<=300) {
width=300;
height=300;
}else{
// 否則就讓寬和高往下減
this.style.width=width-5+"px";
this.style.height=height-5+"px";
}
}
});
</script>
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;
}
// 簡(jiǎn)化上一段函數(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ù)來(lái)接受傳進(jìn)來(lái)的函數(shù)
apply()是一種方法,可以將外界需要用到的參數(shù)附加給fn方法
*/
return false;
}
}
</html>
