JavaScript图片的放大缩小及拖拽

最新推荐文章于 2024-04-15 10:09:15 发布

辣姐什么鬼

最新推荐文章于 2024-04-15 10:09:15 发布

阅读量9.8k

点赞数 6

分类专栏： web前端

本文链接：https://blog.csdn.net/liona_koukou/article/details/80350729

版权

web前端专栏收录该内容

174 篇文章 6 订阅

订阅专栏

实现效果如下：

实现代码：

<!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/zs.jpg" /></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>

辣姐什么鬼

关注

6
点赞
踩
30

收藏

觉得还不错? 一键收藏
打赏
7
评论
JavaScript图片的放大缩小及拖拽

实现效果如下：实现代码： &lt;!DOCTYPE html&gt;&lt;html lang="en"&gt;&lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;Title&lt;/title&gt; &lt;style&gt; div{
复制链接

扫一扫