JavaScript實現鼠標控制自由移動的窗口
本文實例為大傢分享瞭JavaScript實現鼠標控制自由窗口的具體代碼,供大傢參考,具體內容如下
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>用鼠標移動的窗口</title> <style> .mainDiv { width: 350px; height: 200px; border: 2px black solid; position: absolute; } .titleDiv { width: 350px; height: 30px; background-color: YellowGreen ; text-align: center; line-height: 30px; } .contentDiv { width: 350px; height: 170px; background-color: SandyBrown ; text-align: center; } </style> </head> <body> <!--onmousedown:事件會在鼠標按鍵被按下時發生; onmousemove:事件會在鼠標指針移到指定的對象時發生--> <div class="mainDiv" id="mainDiv" style="top: 20px;left: 20px"> <div class="titleDiv" id="titleDiv" onmousedown="mouseDown()" onmouseup="mouseUp()"> 標題欄 </div> <div class="contentDiv"> 《鼠標可控的自由窗口》<br> 註意:沒有給mainDiv設置position為absolute前不能移動 </div> </div> <script> var dx; var dy; var mainDivObj = null; var titleDivObj = null; /** * 鼠標按下函數,當鼠標按下時執行該函數 */ function mouseDown() { //獲得鼠標的鍵值,0是鼠標左鍵;1是鼠標滾軸鍵;2是鼠標右鍵 if (event.button == 0) { mainDivObj = document.getElementById("mainDiv"); titleDivObj = document.getElementById("titleDiv"); //設置鼠標樣式 titleDivObj.style.cursor = "move"; //設置主div的陰影樣式 mainDivObj.style.boxShadow = "0px 0px 10px #000"; //獲得鼠標當前坐標 let x = event.x; let y = event.y; dx = x - parseInt(mainDivObj.style.left); dy = y - parseInt(mainDivObj.style.top); } } //鼠標移動的時候調用 document.onmousemove = mouseMove; /** * 按下鼠標後移動函數,當鼠標移動是執行該函數,移動div */ function mouseMove() { if (mainDivObj != null) { //獲得鼠標當前移動的坐標位置 let x = event.x;//鼠標移動的x軸的坐標 let y = event.y;//鼠標移動的y軸的坐標 //計算div移動後的left與top的距離 //使用當前坐標減去鼠標在div中的位置與div左邊與頂端的距離 let left = x - dx; let top = y - dy; //設置div新的坐標位置 mainDivObj.style.left = left + "px"; mainDivObj.style.top = top + "px"; } } /** * 鼠標松開函數,當鼠標松開時執行該函數 */ function mouseUp() { if (mainDivObj != null) { dx = null; dy = null; //設置div的陰影樣式 mainDivObj.style.boxShadow="none"; mainDivObj = null; titleDivObj.style.cursor="pointer"; titleDivObj = null; } } </script> </body> </html>
以上就是本文的全部內容,希望對大傢的學習有所幫助,也希望大傢多多支持WalkonNet。