滚轮拖动图片、放大缩小，js

Velocityy

于 2020-01-10 09:40:38 发布

阅读量423

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/Velocityy/article/details/103919102

版权

JavaScript 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了如何使用JavaScript实现滚轮控制图片的放大缩小以及通过拖动改变图片位置的功能。虽然现有解决方案缺乏边界值判断，但整体效果尚可。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如题，网上找了很多，就这个还可以，不足的一点就是没有边界值判断

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

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 400px;
            height: 400px;
            overflow: hidden;
            position: relative;
            border: 1px solid #000;
        }
        
        div img {
            position: absolute;
            height: 100%;
            width: auto;
            cursor: move;
        }
    </style>
</head>

<body>
    <div id="div" onmousewheel="return bbimg(this)"><img id="img" border="0" src="img/logo.png" /></div>
    <script language="javascript">
        var params = {
            zoomVal: 1,
            left: 0,
            top: 0,
            currentX: 0,
            currentY: 0,
            flag: false
        };
        //图片缩放
        function bbimg(o) {
            var o = o.getElementsByTagName("img")[0];
            params.zoomVal += event.wheelDelta / 1200;
            if (params.zoomVal >= 0.2) {
                o.style.transform = "scale(" + params.zoomVal + ")";
            } else {
                params.zoomVal = 0.2;
                o.style.transform = "scale(" + params.zoomVal + ")";
                return false;
            }
        }
        //获取相关CSS属性
        var getCss = function(o, key) {
            return o.currentStyle ? o.currentStyle[key] : document.defaultView.getComputedStyle(o, false)[key];
        };
        //拖拽的实现
        var startDrag = function(bar, target, callback) {
            if (getCss(target, "left") !== "auto") {
                params.left = getCss(target, "left");
            }
            if (getCss(target, "top") !== "auto") {
                params.top = getCss(target, "top");
            }
            //o是移动对象
            bar.onmousedown = function(event) {
                params.flag = true;
                if (!event) {
                    event = window.event;
                    //防止IE文字选中
                    bar.onselectstart = function() {
                        return false;
                    }
                }
                var e = event;
                params.currentX = e.clientX;
                params.currentY = e.clientY;
            };
            document.onmouseup = function() {
                params.flag = false;
                if (getCss(target, "left") !== "auto") {
                    params.left = getCss(target, "left");
                }
                if (getCss(target, "top") !== "auto") {
                    params.top = getCss(target, "top");
                }
            };
            document.onmousemove = function(event) {
                var e = event ? event : window.event;
                if (params.flag) {
                    var nowX = e.clientX,
                        nowY = e.clientY;
                    var disX = nowX - params.currentX,
                        disY = nowY - params.currentY;
                    target.style.left = parseInt(params.left) + disX + "px";
                    target.style.top = parseInt(params.top) + disY + "px";
                    if (typeof callback == "function") {
                        callback((parseInt(params.left) || 0) + disX, (parseInt(params.top) || 0) + disY);
                    }
                    if (event.preventDefault) {
                        event.preventDefault();
                    }
                    return false;
                }
            }
        };
        startDrag(document.getElementById("img"), document.getElementById("img"))
    </script>
</body>

</html>