滑动滚轮放大缩小

最新推荐文章于 2023-06-21 19:24:42 发布

GaraMaps

最新推荐文章于 2023-06-21 19:24:42 发布

阅读量1.1k

点赞数

文章标签： HTML5

本文链接：https://blog.csdn.net/GaraMaps/article/details/52529572

版权

直接上代码

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