學(xué)習(xí)資料
http://v.apelearn.com/student.php?view_unit=1447
鼠標(biāo)滾軸事件肿轨，考慮到兼容性：
firefox
使用DOMMouseScroll,但該事件需要使用addEventListener()來綁定宁脊；
ff中使用事件對象中的detail屬性來獲取滾輪滾動的值，向上滾是負(fù)值甚侣，向下滾是正值；
為了統(tǒng)一同一滾動方向的值的正負(fù)一致怎炊，執(zhí)行取反操作该镣；
栗子：
document.addEventListener('DOMMouseScroll',function(e) {
var oEvent = e || event;
alert(e.detail);
},false);
chrome,firefox,safair,ie,opera等
使用mousewheel；
這些瀏覽器中使用事件對象的wheelDelta屬性來獲取滾輪滾動的值侮穿，上滾為正歌径，下滾為負(fù)；
栗子:
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;
/*統(tǒng)一滾動值亲茅，同一方向值要么為正值回铛，要么為負(fù)值*/
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';
}
}
};
鼠標(biāo)滾抽滾動事件的封裝
/*
* 鼠標(biāo)滾軸滾動事件封裝
* @param target:添加事件的對象
* @param fn: 鼠標(biāo)滾軸滾動后需要實(shí)現(xiàn)的功能函數(shù)
*/
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);
/* 阻止系統(tǒng)的默認(rèn)事件 */
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);
}
}
/*
* 規(guī)定鼠標(biāo)滾抽滾動的方向
*/
var down =true;
/* 瀏覽器兼容的處理 */
if(window.navigator.userAgent.toLocaleLowerCase().indexOf('firefox') !== -1) {
bandEvent(target,"DOMMouseScroll",direction);
}else{
bandEvent(target,'mousewheel',function(e) {
direction(e);
});
}
}
封裝使用案例--鼠標(biāo)滾軸事件+自定義滾動條拖拽效果
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;
//用于方向的規(guī)定
var down = true;
/* 圖片總移動范圍 */
var moveAreaImg = oUL.offsetWidth - oWrap.offsetWidth;
/* 滾動條總移動的范圍 */
var moveAreaBar = oScroll.offsetWidth - oBar.offsetWidth;
//1.鼠標(biāo)按下時(shí)
oBar.onmousedown = function(e) {
var oEvent = e || event;
//2.獲取元素的初始位置
var x = oEvent.clientX - oBar.offsetLeft;
//3.鼠標(biāo)按下并移動時(shí)，元素隨之移動
document.onmousemove = function(ev) {
var oEv = ev || event;
//4.偏移距離
l = oEv.clientX - x;
changePosition(l);
};
//7.鼠標(biāo)彈起時(shí)結(jié)束移動
document.onmouseup = function() {
document.onmousemove = null;
document.onmouseup = null;
oBar.releaseCapture && oBar.releaseCapture();
};
//8.阻止默認(rèn)事件
oBar.setCapture && oBar.setCapture();
return false;
};
/*
* 移動位置
* @param pos偏移距離
*/
function changePosition(pos) {
//5.限定移動區(qū)域
if (l <= 0) {
l = 0;
}
if (l >= (oScroll.offsetWidth - oBar.offsetWidth)) {
l = oScroll.offsetWidth - oBar.offsetWidth;
}
//比例
var scale = l / moveAreaBar;
//6.目標(biāo)元素的移動
oBar.style.left = l + 'px';
//圖片列表偏移距離:圖片列表總移動范圍*移動的比例
oUL.style.left = -(moveAreaImg*scale) + 'px';
}
/*
* 鼠標(biāo)滾軸滾動事件封裝
* @param target:添加事件的對象
* @param fn: 鼠標(biāo)滾軸滾動后需要實(shí)現(xiàn)的功能函數(shù)
*
*/
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);
/* 阻止系統(tǒng)的默認(rèn)事件 */
oEvent.preventDefault && oEvent.preventDefault();
return false;
}
/* 鼠標(biāo)滾軸事件的兼容寫法 */
if (window.navigator.userAgent.toLocaleLowerCase().indexOf('firefox') !== -1) {
bandEvent(target, "DOMMouseScroll", direction);
} else {
bandEvent(target, 'mousewheel', function (e) {
direction(e);
});
}
}
/*
*鼠標(biāo)滾動時(shí)芯急，滾動條也發(fā)生移動
*/
wheelFn(oWrap,function(down) {
if (down) {
//向下滾動的速度
l += 22;
//發(fā)生偏移
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--;
}
}
