纯js实现图片拖拽与缩放

最新推荐文章于 2024-06-27 16:14:54 发布

zhaoyuhui1994

最新推荐文章于 2024-06-27 16:14:54 发布

阅读量1k

点赞数

分类专栏：前端文章标签： html js

本文链接：https://blog.csdn.net/qq_17451827/article/details/103453856

版权

前端专栏收录该内容

9 篇文章 0 订阅

订阅专栏

代码如下：

请自行把html中的图片src改为你自己的图片路径，之后就能直接运行了。

这里要注意，<img>的position必须是absolute,而其父节点的position必须是relative。否则父节点的 overflow:hidden是不奏效的！！！！！

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <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="a.jpg" /></div>
<script language="javascript">
// 请注意，div的position必须是relative,img的position必须是absolute!!!!!!
    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>

效果：

缩小