js拖拽：右下角拖拽改變圖片大小

小時。發表於2019-01-10
JS

背景

在專案中偶然碰到，新增圖片自定義改變大小進行排版

原理

初始狀態:

js拖拽：右下角拖拽改變圖片大小

滑鼠在右下角拖動時：

js拖拽：右下角拖拽改變圖片大小

程式碼如下：

<style>
    #div1{
        width:200px;
        height:200px;
        background-color: red;
        position:relative;
        top:50%;
        left:50%;
    }
    #div2{
        width:10px;
        height:10px;
        background-color: black;
        position:absolute;
        right:0;
        bottom:0;
    }
</style>
<body>
    <div id="div1">
        <div id="div2" @mousedown="dragToChangeImg"></div>
    </div>
<script>
    var oDiv=document.getElementById('div1');
    var oDiv2=document.getElementById('div2');
    
    function dragToChangeImg(ev){
        ev=ev||event;
        var disX=ev.clientX-oDiv2.offsetLeft;
        var disY=ev.clientY-oDiv2.offsetTop;
        document.onmousemove=function (ev){
            ev=ev||event;
            oDiv.style.width=ev.clientX-disX+oDiv2.offsetWidth+'px';
            oDiv.style.height=ev.clientY-disY+oDiv2.offsetHeight+'px';
        }
        document.onmouseup=function (){
            document.onmousemove = document.onmouseup = null;
        }
    }
</script>
</body>

複製程式碼

結語

日常記錄小功能，大家如果覺得小黑塊難看，可以將它換成一張小圖片，我在這裡只是為了做出簡單的效果哈。…^-^ （前端小白，如有錯誤，歡迎指正~~）

相關文章