您好,登錄后才能下訂單哦!
本篇文章為大家展示了利用JavaScript怎么實(shí)現(xiàn)一個(gè)拖拽鼠標(biāo)調(diào)整div大小的功能,內(nèi)容簡明扼要并且容易理解,絕對能使你眼前一亮,通過這篇文章的詳細(xì)介紹希望你能有所收獲。
Java的特點(diǎn)有哪些 1.Java語言作為靜態(tài)面向?qū)ο缶幊陶Z言的代表,實(shí)現(xiàn)了面向?qū)ο罄碚摚试S程序員以優(yōu)雅的思維方式進(jìn)行復(fù)雜的編程。 2.Java具有簡單性、面向?qū)ο?、分布式、安全性、平臺獨(dú)立與可移植性、動(dòng)態(tài)性等特點(diǎn)。 3.使用Java可以編寫桌面應(yīng)用程序、Web應(yīng)用程序、分布式系統(tǒng)和嵌入式系統(tǒng)應(yīng)用程序等。
實(shí)現(xiàn)思路:
根據(jù)鼠標(biāo)位置改變鼠標(biāo)樣式
當(dāng)鼠標(biāo)在div的邊緣和四個(gè)角時(shí)顯示不同的樣式,通過cursor修改
當(dāng)鼠標(biāo)在div的邊緣和四個(gè)角按下時(shí)記錄具體坐標(biāo)點(diǎn)位置, 并開始根據(jù)鼠標(biāo)的移動(dòng)修改div的尺寸
鼠標(biāo)松開時(shí)結(jié)束尺寸修改
代碼實(shí)現(xiàn):
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> body, html { width: 100%; height: 100%; margin: 0; } #container { width: 200px; height: 200px; padding: 15px; border: #00cdcd 2px solid; box-sizing: border-box; } .item { cursor: default; width: 100%; height: 100%; background: #757575; } </style> </head> <body id="body"> <div id="container"> <div class="item"></div> </div> <script> //需要調(diào)整尺寸的div let c = document.getElementById('container') // body監(jiān)聽移動(dòng)事件 document.getElementById('body').addEventListener('mousemove', move) // 鼠標(biāo)按下事件 c.addEventListener('mousedown', down) // 鼠標(biāo)松開事件 document.getElementById('body').addEventListener('mouseup', up) // 是否開啟尺寸修改 let resizeable = false // 鼠標(biāo)按下時(shí)的坐標(biāo),并在修改尺寸時(shí)保存上一個(gè)鼠標(biāo)的位置 let clientX, clientY // div可修改的最小寬高 let minW = 8, minH = 8 // 鼠標(biāo)按下時(shí)的位置,使用n、s、w、e表示 let direc = '' // 鼠標(biāo)松開時(shí)結(jié)束尺寸修改 function up() { resizeable = false } // 鼠標(biāo)按下時(shí)開啟尺寸修改 function down(e) { let d = getDirection(e) // 當(dāng)位置為四個(gè)邊和四個(gè)角時(shí)才開啟尺寸修改 if (d !== '') { resizeable = true direc = d clientX = e.clientX clientY = e.clientY } } // 鼠標(biāo)移動(dòng)事件 function move(e) { let d = getDirection(e) let cursor if (d === '') cursor = 'default'; else cursor = d + '-resize'; // 修改鼠標(biāo)顯示效果 c.style.cursor = cursor; // 當(dāng)開啟尺寸修改時(shí),鼠標(biāo)移動(dòng)會修改div尺寸 if (resizeable) { // 鼠標(biāo)按下的位置在右邊,修改寬度 if (direc.indexOf('e') !== -1) { c.style.width = Math.max(minW, c.offsetWidth + (e.clientX - clientX)) + 'px' clientX = e.clientX } // 鼠標(biāo)按下的位置在上部,修改高度 if (direc.indexOf('n') !== -1) { c.style.height = Math.max(minH, c.offsetHeight + (clientY - e.clientY)) + 'px' clientY = e.clientY } // 鼠標(biāo)按下的位置在底部,修改高度 if (direc.indexOf('s') !== -1) { c.style.height = Math.max(minH, c.offsetHeight + (e.clientY - clientY)) + 'px' clientY = e.clientY } // 鼠標(biāo)按下的位置在左邊,修改寬度 if (direc.indexOf('w') !== -1) { c.style.width = Math.max(minW, c.offsetWidth + (clientX - e.clientX)) + 'px' clientX = e.clientX } } } // 獲取鼠標(biāo)所在div的位置 function getDirection(ev) { let xP, yP, offset, dir; dir = ''; xP = ev.offsetX; yP = ev.offsetY; offset = 10; if (yP < offset) dir += 'n'; else if (yP > c.offsetHeight - offset) dir += 's'; if (xP < offset) dir += 'w'; else if (xP > c.offsetWidth - offset) dir += 'e'; return dir; } </script> </body> </html>
上述內(nèi)容就是利用JavaScript怎么實(shí)現(xiàn)一個(gè)拖拽鼠標(biāo)調(diào)整div大小的功能,你們學(xué)到知識或技能了嗎?如果還想學(xué)到更多技能或者豐富自己的知識儲備,歡迎關(guān)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。