你的位置:首页 > 网页设计

[网页设计]滑动滚轮放大缩小


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