原生js拖拽實(shí)現(xiàn)圖形伸縮效果
更新時間:2020年02月10日 18:10:26 作者:crazy的藍(lán)色夢想
這篇文章主要為大家詳細(xì)介紹了原生js拖拽實(shí)現(xiàn)圖形的伸縮效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js拖拽實(shí)現(xiàn)圖形伸縮效果的具體代碼,供大家參考,具體內(nèi)容如下
點(diǎn)擊矩形的四個角和四個邊實(shí)現(xiàn)不同的效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ padding: 0; margin:0; } .div1{ width: 200px; height: 200px; background-color: #71e4ff; position: absolute; top: 200px; left: 200px; } .t, .b{ width: 100%; height: 20px; background-color:#ffa2d3; position: absolute; } .t{ left: 0; top:0; } .b{ left: 0; bottom:0; } .r, .l{ width: 20px; height: 100%; background-color:#ffa2d3; position: absolute; } .r{ right: 0; top:0; } .l{ left: 0; top:0; } .lt, .lb, .rt, .rb{ width: 20px; height: 20px; background-color: #93ff6b; position: absolute; } .lt{ left: 0; top:0; } .rt{ right: 0; top:0; } .lb{ left: 0; bottom: 0; } .rb{ right: 0; bottom:0; } </style> </head> <body> <div class="div1" id="_div1"> <div class="t"></div> <div class="r"></div> <div class="b"></div> <div class="l"></div> <div class="lt"></div> <div class="lb"></div> <div class="rt"></div> <div class="tb"></div> </div> </body> </html> <script> // 獲取元素 var _div1 = document.getElementById("_div1"); var divs = _div1.children; // 遍歷每個可以拖拽的元素 for(var i = 0;i < divs.length ;i++) { drag(divs[i]); } // 封裝一個拖拽函數(shù) function drag(obj){ obj.onmousedown = function(event){ // 捕獲事件 var event = event || window.event; // 存儲當(dāng)前的_div1的寬高 var divW = _div1.offsetWidth; var divH = _div1.offsetHeight; // 獲得當(dāng)前_div1的offsetLeft 和 offsetTop var divL = _div1.offsetLeft; var divT = _div1.offsetTop; // 存儲鼠標(biāo)按下時的位置 var clientx = event.clientX; var clienty = event.clientY; document.onmousemove = function(event){ var event = event || window.event; if(obj.className.indexOf('t') != -1){ _div1.style.height = divH + ( clienty- event.clientY) + 'px'; _div1.style.top = divT -( clienty- event.clientY)+ 'px'; } if(obj.className.indexOf('b') != -1){ _div1.style.height = divH + ( event.clientY -clienty ) + 'px'; } if(obj.className.indexOf('r')!= -1){ _div1.style.width = divW + ( event.clientX - clientx) + 'px'; } if(obj.className.indexOf('l')!= -1){ _div1.style.width = divW + ( clientx - event.clientX) + 'px'; _div1.style.left = event.clientX + 'px'; } } document.onmouseup = function(){ document.onmousemove = null; document.onmouseup = null; } } return false; } </script>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
jsTree樹控件(基于jQuery, 超強(qiáng)悍)[推薦]
jsTree是基于javascript的一個跨瀏覽器樹控件,功能強(qiáng)大,而且是免費(fèi)的。2009-09-09JS從非數(shù)組對象轉(zhuǎn)數(shù)組的方法小結(jié)
這篇文章主要給大家介紹了關(guān)于JS從非數(shù)組對象轉(zhuǎn)數(shù)組的一些方法,分別是Array.prototype.slice.call(obj)、Array.from(obj)、[…obj]和Object.values(obj)等方法的詳細(xì)實(shí)現(xiàn)方法,需要的朋友可以參考下。2018-03-03JS基于clipBoard.js插件實(shí)現(xiàn)剪切、復(fù)制、粘貼
這篇文章主要介紹了JS實(shí)現(xiàn)剪切、復(fù)制、粘貼——clipBoard.js 的相關(guān)資料,需要的朋友可以參考下2016-05-05Javascript 類的繼承實(shí)現(xiàn)代碼
JavaScript中類的學(xué)習(xí),從基本類繼承過來方法。2009-07-07laydate只顯示時分 不顯示秒的功能實(shí)現(xiàn)方法
今天小編就為大家分享一篇laydate只顯示時分 不顯示秒的功能實(shí)現(xiàn)方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2019-09-09