fed
fed copied to clipboard
Published
20 hours ago •
BestACE
BestACE
【讨论帖】关于上课讲到的滚轮事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-color: skyblue;
margin-top: -320px;
margin-left: 1200px;
position: fixed;
text-align: center;
}
</style>
</head>
<body>
<div >
<h1 id="four" >滑动滚轮</h1>
</div>
<script>
var ofour=document.querySelector("#four");
ofour.addEventListener('mousewheel',function(e){
var zoom=parseInt(ofour.style.zoom, 10)||100;
zoom+=event.wheelDelta/12;
console.log(zoom);
if (zoom>0) ofour.style.zoom=zoom+'%';
return false;
});
</script>
</body>
</html>
//可以使用event.target
var ofour = document.querySelector("#four");
ofour.addEventListener('mousewheel', function(e) {
var zoom = parseInt(event.target.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if(zoom > 0) event.target.style.zoom = zoom + '%';
return false;
});
//也可以使用event.currentTarget
var ofour = document.querySelector("#four");
ofour.addEventListener('mousewheel', function(e) {
var zoom = parseInt(event.currentTarget.style.zoom, 10) || 100;
zoom += event.wheelDelta / 12;
if(zoom > 0) event.currentTarget.style.zoom = zoom + '%';
return false;
});
