鼠标滚轮，在普通浏览器是 mousewheel 这个事件
但是在火狐中是 DOMMouseScroll 这个事件，那么如何让其兼容？
这里我封装了一个 mouseScroll() 的方法，这样就可以检测到鼠标滚轮的动作了。
//兼容鼠标滚轮
function mouseScroll(obj,fn){
addEvent(obj,"mousewheel",fn);
addEvent(obj,"DOMMouseScroll",fn);
}
//跨浏览器添加事件
function addEvent(obj, type, fn) {
if (obj.addEventListener) {
obj.addEventListener(type, fn, false);
} else if (obj.attachEvent) {
obj.attachEvent('on' + type, function () {
fn.call(obj);
});
}
}
//跨浏览器移除事件
function removeEvent(obj, type, fn) {
if (obj.removeEventListener) {
obj.removeEventListener(type, fn, false);
} else if (obj.detachEvent) {
obj.detachEvent('on' + type, fn);
}
}好，我们来测试看看
JS：
var oDiv1=song("#lbq").yx();
function ss(ev){
var oEvent=ev||event;
alert("mouseScroll");
}
mouseScroll(oDiv1,ss);
HTML：
<div class="bo" id="lbq">
sdfasdf
</div>
CSS:
#lbq{
background: #f60;
height:200px;
width:200px;
}
运行代码：
并检测一下 鼠标滚动 是不是可以弹窗 ,
如果看到了弹出，则证明已经成功了第一步。
那么如何检测鼠标滚轮是 向上呢，还是向下啊？ 一次滚轮的值是多少?
IE：oEvent.wheelDelta
上 正
下 负
火狐 oEvent.detail
上 负
下 正
因此需要写一个兼容性的判断， 是上 还是下
function ss(ev){
var oEvent=ev||event;
var down=true;
down=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
console.log(down);
}这样就能检测到 向上 还是向下了
做一个小案例：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
div,ul,li,body{margin:0px;padding:0px;list-style:none;}
#lbq{
background: #f60;
height:200px;
width:200px;
}
</style>
<script type="text/javascript" src="js/base.js"></script>
<script type="text/javascript">
window.onload=function(){
var oDiv1=song("#lbq").yx();
function ss(ev){
var oEvent=ev||event;
var w_h=song("#lbq").css(["height","width"]);
var down=true;
down=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
console.log(w_h.height);
if(down){
song("#lbq").css({"height":parseInt(w_h.height)+10,"width":parseInt(w_h.width)+10});
}else{
song("#lbq").css({"height":parseInt(w_h.height)-10,"width":parseInt(w_h.width)-10});
}
}
mouseScroll(oDiv1,ss);
}
</script>
</head>
<body>
<div class="bo" id="lbq">
sdfasdf
</div>
</body>
</html>
下载压缩包，使用base.js 文件
以下代码使用了 动画
window.onload=function(){
var oDiv1=song("#lbq").yx();
function ss(ev){
var oEvent=ev||event;
var w_h=song("#lbq").css(["height","width"]);
var down=true;
down=oEvent.wheelDelta?oEvent.wheelDelta<0:oEvent.detail>0;
var diffx=30;
if(down){
//song("#lbq").css({"height":parseInt(w_h.height)+10,"width":parseInt(w_h.width)+10});
song("#lbq").startMove({"height":parseInt(w_h.height)+diffx,"width":parseInt(w_h.width)+diffx},300);
}else{
//song("#lbq").css({"height":parseInt(w_h.height)-10,"width":parseInt(w_h.width)-10});
song("#lbq").startMove({"height":parseInt(w_h.height)-diffx,"width":parseInt(w_h.width)-diffx},300);
}
}
mouseScroll(oDiv1,ss);
}