w3cplus学习笔记--鼠标滚轴事件
学习资料
http://v.apelearn.com/student.php?view_unit=1447
鼠标滚轴事件，考虑到兼容性：
firefox
使用DOMMouseScroll,但该事件需要使用addEventListener()来绑定；
ff中使用事件对象中的detail属性来获取滚轮滚动的值，向上滚是负值，向下滚是正值；
为了统一同一滚动方向的值的正负一致，执行取反操作；
栗子：
document.addEventListener('DOMMouseScroll',function(e) {
var oEvent = e || event;
alert(e.detail);
},false);
chrome,firefox,safair,ie,opera等
使用mousewheel；
这些浏览器中使用事件对象的wheelDelta属性来获取滚轮滚动的值，上滚为正，下滚为负；
栗子:
document.onmousewheel = function(e) {
var oEvent = e || event;
console.log(e.wheelDelta);
};
案例--改变元素的尺寸
HTML
<div id="box"></div>
CSS
#box {width: 200px;height: 300px; background: orange;}
JS
window.onload=function() {
var oBox =document.getElementById('box');
//判断方向
var down =true;
if(window.navigator.userAgent.toLocaleLowerCase().indexOf('firefox') !== -1) {
/*火狐*/
oBox.addEventListener("DOMMouseScroll",function(e) {
varoEvent = e ||event;
/*统一滚动值，同一方向值要么为正值，要么为负值*/
if(-oEvent.detail<0) {
//向下
down =true;
}else{
//向上
down =false;
}
changeSize(down);
},false)
}else{
oBox.onmousewheel=function(e) {
varoEvent = e ||event;
if(e.wheelDelta<0) {
down =true;
}else{
down =false;
}
changeSize(down);
};
}
function changeSize(down) {
if(down) {
oBox.style.height= oBox.offsetHeight+10+'px';
}
else{
oBox.style.height= oBox.offsetHeight-10+'px';
}
}
};
鼠标滚抽滚动事件的封装
/*
* 鼠标滚轴滚动事件封装
* @param target:添加事件的对象
* @param fn: 鼠标滚轴滚动后需要实现的功能函数
*/
function wheelFn(target,fn) {
/*
* 判别方向
* @param {e} 事件对象
* true: 向下滚动
*/
function direction(e) {
var oEvent = e ||event;
if(e.wheelDelta) {
if(e.wheelDelta<0) {
down =true;
}else{
down =false;
}
}else{
if(- e.detail<0) {
down =true;
}else{
down =false;
}
}
fn(down);
/* 阻止系统的默认事件 */
oEvent.preventDefault&& oEvent.preventDefault();
return false;
}
/*
* 事件绑定
* @param target: 绑定事件的对象
* @param type: 绑定的事件类型
* @param fn
*/
function bandEvent(target,type,fn) {
if(target.attachEvent) {
target.attachEvent('on'+ type,fn);
}else{
target.addEventListener(type,fn,false);
}
}
/*
* 规定鼠标滚抽滚动的方向
*/
var down =true;
/* 浏览器兼容的处理 */
if(window.navigator.userAgent.toLocaleLowerCase().indexOf('firefox') !== -1) {
bandEvent(target,"DOMMouseScroll",direction);
}else{
bandEvent(target,'mousewheel',function(e) {
direction(e);
});
}
}
封装使用案例--鼠标滚轴事件+自定义滚动条拖拽效果
HTML
<div id="wrap">
<div id="list">
<ul><li><a href="javascript:;"><img src="../images/1.jpg"></a></li><li><a href="javascript:;"><img src="../images/2.jpg"></a></li></ul>
</div><div id="scroll"><div id="bar"></div></div>
</div>
CSS
div,ul,li,a,img {padding: 0;margin: 0;list-style: none;text-decoration: none;}
#wrap {overflow: hidden;width: 600px;height: 550px;margin: 50px auto;}
#list {position: relative;width: 600px;height: 540px;overflow: hidden;}
#list ul {position: absolute;top: 0;left: 0;overflow: hidden;width: 2100px;height: 540px;}
#list li {float: left;}
#list img {display: inline-block;*display: inline;width: 350px;height: 540px;margin-right: 20px;}
#scroll {position: relative;width: 600px;height:10px;background-color: #ccc;border-radius: 5px;}
#bar {position: absolute;top: 0;left: 0;width: 100px;height: 10px;background: orangered;border-radius: 5px;}
JS
window.onload = function() {
var oWrap = document.getElementById('wrap');
var oUL = document.getElementsByTagName('ul')[0];
var oScroll = document.getElementById('scroll');
var oBar = document.getElementById('bar');
var l = 0;
//用于方向的规定
var down = true;
/* 图片总移动范围 */
var moveAreaImg = oUL.offsetWidth - oWrap.offsetWidth;
/* 滚动条总移动的范围 */
var moveAreaBar = oScroll.offsetWidth - oBar.offsetWidth;
//1.鼠标按下时
oBar.onmousedown = function(e) {
var oEvent = e || event;
//2.获取元素的初始位置
var x = oEvent.clientX - oBar.offsetLeft;
//3.鼠标按下并移动时，元素随之移动
document.onmousemove = function(ev) {
var oEv = ev || event;
//4.偏移距离
l = oEv.clientX - x;
changePosition(l);
};
//7.鼠标弹起时结束移动
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
oBar.releaseCapture && oBar.releaseCapture();
};
//8.阻止默认事件
oBar.setCapture && oBar.setCapture();
return false;
};
/*
* 移动位置
* @param pos偏移距离
*/
function changePosition(pos) {
//5.限定移动区域
if (l <= 0) {
l = 0;
}
if (l >= (oScroll.offsetWidth - oBar.offsetWidth)) {
l = oScroll.offsetWidth - oBar.offsetWidth;
}
//比例
var scale = l / moveAreaBar;
//6.目标元素的移动
oBar.style.left = l + 'px';
//图片列表偏移距离:图片列表总移动范围*移动的比例
oUL.style.left = -(moveAreaImg*scale) + 'px';
}
/*
* 鼠标滚轴滚动事件封装
* @param target:添加事件的对象
* @param fn: 鼠标滚轴滚动后需要实现的功能函数
*
*/
function wheelFn(target,fn) {
/*
* 事件绑定
* @param target: 绑定事件的对象
* @param type: 绑定的事件类型
* @param fn
*/
function bandEvent(target,type,fn) {
if (target.attachEvent) {
target.attachEvent('on' + type, fn);
} else {
target.addEventListener(type, fn, false);
}
}
/*
* 判别方向
* @param {e} 事件对象
* true: 向下滚动
*/
function direction(e) {
var oEvent = e || event;
if (oEvent.wheelDelta) {
if (oEvent.wheelDelta < 0) {
//向下滚动
down = true;
} else {
//向上滚动
down = false;
}
} else {
if (-oEvent.detail < 0) {
down = true;
} else {
down = false;
}
}
fn(down);
/* 阻止系统的默认事件 */
oEvent.preventDefault && oEvent.preventDefault();
return false;
}
/* 鼠标滚轴事件的兼容写法 */
if (window.navigator.userAgent.toLocaleLowerCase().indexOf('firefox') !== -1) {
bandEvent(target, "DOMMouseScroll", direction);
} else {
bandEvent(target, 'mousewheel', function (e) {
direction(e);
});
}
}
/*
*鼠标滚动时，滚动条也发生移动
*/
wheelFn(oWrap,function(down) {
if (down) {
//向下滚动的速度
l += 22;
//发生偏移
changePosition(l);
} else {
l -= 22;
changePosition(l);
}
});
};
滚轴事件案例
封装案例--改变背景颜色
鼠标滚轴案例
wheelFn(oBox,changeBg);
var r =parseInt(Math.random()*255),
g =parseInt(Math.random()*255),
b =parseInt(Math.random()*255),
function changeBg(down) {
if(down) {
//oBox.style.height = oBox.offsetHeight + 10 + 'px';
oBox.style.backgroundColor='rgb('+ r +','+ g +','+ b +')';
r++,g++,b++;
if(r <0|| g <0||b <0) {return false;}
}else{
//oBox.style.height = oBox.offsetHeight - 10 + 'px';
oBox.style.backgroundColor='rgb('+ r +','+ g +','+ b +')';
r--,g--,b--;
}
}
