首页 > 代码库 > 滑动滚轮放大缩小
滑动滚轮放大缩小
<!doctype html><html><head><meta charset="utf-8"><title>标题</title><meta name="keywords" content=""><meta name="description" content=""><style> *{margin:0; padding:0; list-style:none;} body{ height: 2000px; } #box{ width: 200px; height: 200px; background: green; }</style></head><body><div id="box"></div><script> 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=http://www.mamicode.com/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;//阻止默认事件 } }; </script></body></html>
滑动滚轮放大缩小
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。