javascript 实现图片的拖拽和伸缩效果

最新推荐文章于 2020-11-21 05:46:35 发布

原创最新推荐文章于 2020-11-21 05:46:35 发布 · 644 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #function #null #input #server #border

javascript 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用HTML、JavaScript实现图片缩放及拖动功能的方法。通过监听鼠标滚轮事件调整图片大小，并利用鼠标移动事件实现图片在限定区域内的拖动。此方案适用于需要用户交互操作图片的应用场景。

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

折腾了两天，本来打算自己研究的，奈何实力有限，只能借助网络，自己给了点修改，暂时满足了自己的需求。得继续给自己加把劲才行。恩，加油。起跑没跑好，后面就得更努力的弥补~~~

<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" runat="server">
    <title>无标题页</title>

</head>
<body>
    <form id="form1" runat="server">
    <div>
        <input id="txtx" type="text" />
        <input id="txty" type="text" />
        <div id="imgDiv" style="width:500px; height:400px; overflow:hidden; left:5px; top:40px; background-color:Black; position:absolute;">
            <img id="imgShow" onmousewheel="return mouseWhe(this);" width="300px" height="260px" src="1.jpg" border="0" />
        </div>
    </div>
    </form>
</body>
<script type="text/javascript">
    function mouseWhe(o)
        {
            var x=o.getBoundingClientRect().left;
            var y=o.getBoundingClientRect().top;



            var zoom=parseInt(o.style.zoom, 10)||100;
            zoom+=event.wheelDelta/12;

            if (zoom>50&&zoom<200)//设定最大最小值
                o.style.zoom=zoom+'%';

            return false;
        }
</script>
<script type="text/javascript">

    document.onmousemove = mouseMove;
    document.onmouseup = mouseUp;
    var dragObject = null ;
    var mouseOffset = null ;
    var divleft=parseInt(document.getElementById("imgDiv").style.left);
    var divtop=parseInt(document.getElementById("imgDiv").style.top);

    alert(divleft);
    alert(divtop);

    function mouseCoords(ev) {
        if(ev.pageX || ev.pageY) {
            return {x:ev.pageX-divleft, y:ev.pageY-divtop};
        }
        return {
            x:ev.clientX + document.body.scrollLeft - document.body.clientLeft-divleft,
            y:ev.clientY + document.body.scrollTop - document.body.clientTop-divtop
            };
    }

    function getPosition(e) {
        var left = 0;
        var top = 0;
        while (e.offsetParent) {
            left += e.offsetLeft;
            top += e.offsetTop;
            e = e.offsetParent;
        }
        left += e.offsetLeft;
        top += e.offsetTop;
        return {x:left-divleft, y:top-divtop} ;
    }

    function getMouseOffset(target, ev) {
        ev = ev || window.event;
        var docPos = getPosition(target);
        var mousePos = mouseCoords(ev);
        return {x:mousePos.x - docPos.x, y:mousePos.y - docPos.y} ;
    }


    function mouseMove(ev) {
        ev = ev || window.event;
        var mousePos = mouseCoords(ev);

        document.getElementById("txtx").innerText=mousePos.x;
        document.getElementById("txty").innerText=mousePos.y;

        makeDraggable(document.getElementById("imgShow"));//add by lego

        if (dragObject) {
            dragObject.style.position = 'absolute';
            dragObject.style.top = mousePos.y - mouseOffset.y;
            dragObject.style.left = mousePos.x - mouseOffset.x;
            return false ;
        }
    }

    function mouseUp() {
        dragObject = null ;
    }

    function makeDraggable(item) {
        if (!item) return ;
        item.onmousedown = function (ev) {
            dragObject = this ;
            mouseOffset = getMouseOffset(this, ev);
            return false ;
        }
    }

</script>
</html>