pc弹出层图片滚轮缩放查看

最新推荐文章于 2023-07-27 16:47:48 发布

大佬们救救孩子吧

最新推荐文章于 2023-07-27 16:47:48 发布

阅读量240

点赞数

文章标签： html

本文链接：https://blog.csdn.net/zhao_guang_liang/article/details/104833717

版权

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>图片鼠标滚轮缩放</title>
    <script src="./jquery-1.10.js"></script>

</head>

<body>
    <div id="tanchuang" style="position: absolute;top: 0;bottom: 0;width: 100%;background-color: rgba(0, 0, 0, 0.5);">
        <img id="bigimg" height="50%" style="position: absolute;top: 50%;left: 50%;" src="http://img002.hc360.cn/y1/M05/38/CD/wKhQc1TIAlaES8LjAAAAADvXScw963.jpg" alt="">
    </div>
</body>
<script>
    sfimg()
    // 图片居中
    function sfimg() {
        $('#bigimg').css({ 'margin-left': '-' + ($('#bigimg').width() / 2) + 'px', 'margin-top': '-' + ($('#bigimg').height() / 2) + 'px' })
    }
    var sfdx = 1
    // 鼠标滚动
    $('#bigimg').on("mousewheel DOMMouseScroll", function (e) {
        var delta = (e.originalEvent.wheelDelta && (e.originalEvent.wheelDelta > 0 ? 1 : -1)) || (e.originalEvent.detail && (e.originalEvent.detail > 0 ? -1 : 1));
        if (delta == -1) {
            if (sfdx < 2) {
                sfdx += 0.1
            }
        } else if (delta == 1) {
            if (sfdx > 0.5) {
                sfdx -= 0.1
            }
        }
        $('#bigimg').css('transform', 'scale(' + sfdx + ',' + sfdx + ')')
        sfimg()
    });

</script>

</html>