开发工具与关键技术:html+js
作者: 李伙
撰写时间: 2019年1月27日
首先,要为窗口绑定一个滚轮事件。谷歌(chrome) IE等浏览器的滚轮事件为“window.onmousewheel=wheel;”;火狐(firefox)等浏览器的滚轮事件为“window.addEventListener(“DOMMouseScroll”,wheel,false);”。由于谷歌(chrome) IE 火狐(firefox)等浏览器的滚轮事件不同,因此要用到事件的监听,这样就可以在不同的浏览器执行不同的滚轮事件。具体格式如下:
//chrome&IE
//绑定鼠标滚轮事件
window.onmousewheel=wheel;
//firefox
//事件监听
if(window.addEventListener){
window.addEventListener("DOMMouseScroll",wheel,false);
}
绑定好滚轮事件后,就封装一个函数,其函数名要与滚轮事件的函数名一致;然后再在里面写需要执行的代码。如下:
function wheel(ev){
var e=ev || event;
var b=false;
if(e.wheelDelta){//ev.wheelDelta chrome&IE
//ev.detail firefox
b=e.wheelDelta>0?true:false;
}else{
b=e.detail<0?true:false;
}
alert(b);
}
由图中可知:谷歌(chrome) IE等浏览器的滚轮移动值用“wheelDelta”获取,火狐(firefox)等浏览器的滚轮移动值用“detail”获取;这样各个浏览器获取的滚轮移动值就能一致啦。这样一个简单的鼠标滚轮事件就完成啦。当然也可以加一些需要执行的代码,比如加一些动画效果等等。