jQuery鼠标滚轮放大缩小_滑动滚轮放大缩小
2017-08-04 14:44:42  By: shinyuu

• shinyuu
• JavaScript教程
• 0
• 1822
• 1

分享一个 JavaScript 写的通过滑动滚轮放大缩小、Demo是用 Css 和 JavaScript 一起完成的、而且是兼容了常用的浏览器、比如火狐浏览器和非火狐浏览器的兼容

CSS代码

*{
    margin:0; padding:0; 
    list-style:none;
}
body{
    height: 2000px;
}
#box{
    width: 200px;
    height: 200px;
    background: green;
}

JS代码

var box=document.getElementById(´box´);
var str=window.navigator.userAgent.toLowerCase();
if (str.indexOf(´firefox´)!=-1) {//火狐浏览器
    box.addEventListener(´DOMMouseScroll´,function (event){
        // event.preventDefault();//阻止窗口默认的滚动事件
    // console.log(event.detail);//前滚-3
    if (event.detail<0) {
        console.log(´前滚´);
        box.style.width=box.offsetWidth 20 ´px´;
        box.style.height=box.offsetHeight 20 ´px´;
    };
    if (event.detail>0) {
        console.log(´后滚´);
        box.style.width=box.offsetWidth-20 ´px´;
        box.style.height=box.offsetHeight-20 ´px´;
    };
    return false;//阻止默认事件
    },false);
} else{//非火狐浏览器
    box.onmousewheel=function (ev){
        var e=ev||window.event;
        /*if (e.preventDefault) {
            e.preventDefault();
        } else{
            e.returnValue=false;
        };*/
        // console.log(e);
        // console.log(e.wheelDelta);//前滚120
        if (e.wheelDelta>0) {
        console.log(´前滚´);
        box.style.width=box.offsetWidth 20 ´px´;
        box.style.height=box.offsetHeight 20 ´px´;
    };
    if (e.wheelDelta<0) {
        console.log(´后滚´);
        box.style.width=box.offsetWidth-20 ´px´;
        box.style.height=box.offsetHeight-20 ´px´;
    };
    return false;//阻止默认事件
    }
};

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号（ddblogs）

或者你也可以关注我的新浪微博、了解DD博客的最新动态：DD博客官方微博（dwtedx的微博）

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板（dwtedx的留言板）

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛