滚轮缩放

2021-01-17

前端

要使人成为真正有教养的人,必须具备三个品质:渊博的知识、 思维的习惯和高尚的情操。知识不多就是愚昧;不习惯于思维, 就是粗鲁或蠢笨;没有高尚的情操,就是卑俗。——车尔尼雪夫斯基

代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>scroll</title>
</head>
<body>
<img width="500px" id="img" src="https://VampireAchao.github.io/imgs/preview/3459_3.jpg"/>
<script type="application/javascript">
let images = document.getElementsByTagName("img");
for (let i = 0; i < images.length; i++) {
let img = images[i];
img.addEventListener("wheel", function (e) {
let delta = Math.max(-1, Math.min(1, (e.wheelDelta || -e.detail)));
img.style.width = Math.max(500, Math.min(2000, img.width + (100 * delta))) + "px";
return false;
}, false);
}
</script>
</body>
</html>

效果

QQ录屏20201124200908