1.需求分析：設計一個元素，可以跟隨鼠標的移動，元素也進行移動，并且能夠在鼠標按上與按下元素的時候，元素同樣可以進行改變樣式顏色。
2. 設計思路：先是需要獲取元素，給元素綁定鼠標按下的事件，在綁定的事件中，兼容event事件，獲取鼠標的坐標和元素的坐標，通過鼠標的坐標減去元素的坐標就可以得到鼠標在元素中的坐標。在綁定事件中，寫上一個元素的移動事件，獲取元素的移動坐標。最后，在鼠標按上的事件函數中，可以調用元素的移動事件就可以了。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>圖層拖拽</title> <style> .box { width: 200px; height: 200px; background-color: skyblue; border: 2px solid #ccc; cursor: pointer; position: absolute; top: 20px; left: 100px; } </style></head><body><div class="box" id="box"></div></body><script> var box = document.getElementById("box"); box.onmousedown = function(env){ // 兼容event事件 var env = env || window.event; // 獲取鼠標的坐標 var x = env.clientX; var y = env.clientY; // 獲取元素的坐標 var left = box.offsetLeft; var top = box.offsetTop; // 獲取鼠標在元素中的坐標 var x_left = x - left; var y_top = y -top; // 鼠標點擊后改變顏色 box.style.background = "red"; // 元素的移動事件函數 box.onmousemove = function(env){ // 兼容event事件 var env = env || window.event; // 獲取元素移動時的鼠標的坐標 var x = env.clientX; var y = env.clientY; // 元素的移動坐標 box.style.left = (x - x_left)+"px"; box.style.top = (y - y_top)+"px"; } }; // 鼠標彈出的事件函數 box.onmouseup = function(){ box.style.background = "skyblue"; // 在鼠標彈出后再次調用元素的鼠標移動事件 box.onmousemove = function(){}; };</script></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持錯新站長站。
新聞熱點
疑難解答
圖片精選
