jQuery鼠标滚轮放大缩小_滑动滚轮放大缩小
2017-08-04 14:44:42 By: dwtedx
分享一个 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的留言板)
感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛