原生js实现图片缩放

最新推荐文章于 2023-12-06 12:48:13 发布

良纵

最新推荐文章于 2023-12-06 12:48:13 发布

阅读量604

点赞数 1

本文链接：https://blog.csdn.net/qq_33807889/article/details/104948763

版权

自行更换图片地址

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #imgContainer {
            background: rgba(255, 0, 0, 0.1);
        }
    </style>
</head>

<body>
    <div class="container">
        <p>鼠标滑轮滚动实现图片缩放</p>
        <label for="rate">灵敏度 <input type="text" name="rate" id="rate">
        </label>
        <div id="imgContainer">
            <img id="img" src="./dictory.png" alt="">
        </div>
    </div>
    <script>

        window.onload = function () {
            const img = document.getElementById("img");
            const imgContainer = document.getElementById("imgContainer");
            const rateDom = document.getElementById("rate");
            var rate = 5000;
            rateDom.addEventListener('change', function (e) {
                rate = e.target.value;
            }, false);

            const calc = (value) => 1 + value / (rate || 5000);
            imgContainer.addEventListener("mousewheel", function (e) {
                img.style.width = img.offsetWidth * calc(e.deltaY) + 'px'
                e.preventDefault()
            }, false);
        }
    </script>
</body>

</html>