<!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>滑动滚轮</p>
</div>
</body>
<script src="js/mouseWheel.js"></script>
<script>
// 获取元素
var box=document.getElementById('box');
mouseWheel(box,function(event,down){
// 获取当前元素对象的宽度和高度
var width=this.offsetWidth;
var height=this.offsetHeight;
//判断当前的方向
if (down) {
// 确定是向下滑动后,继续判断,判断当前宽度是否大于500
if (width>=500&&height>=500) {
// 限定宽高
width=500;
height=500;
}else{
// 否则就让宽和高往上增长
this.style.width=width+1+"px";
this.style.height=height+1+"px";
}
// 否则当前的方向是往上滑
}else{
// 确定是向上滑动后,限定一个宽高
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;
}
// 简化上一段函数代码
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;
}
}
</html>
