星空网 > 软件开发 > 网页设计

滑动滚轮放大缩小

<!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=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>

 




原标题:滑动滚轮放大缩小

关键词:

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。
相关文章
我的浏览记录
最新相关资讯
海外公司注册 | 跨境电商服务平台 | 深圳旅行社 | 东南亚物流