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

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

<!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>

你可能感兴趣的:(JavaScript)