开发者社区云计算文章正文

滚轮缩放

2023-11-16 48

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

简介： 滚轮缩放

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

代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>scroll</title>
</head>
<body>
<img width="500px" id="img" src="https://VampireAchao.gitee.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>