溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
今天就跟大家聊聊有關js如何實現div色塊拖動錄制，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結了以下內容，希望大家根據這篇文章可以有所收獲。
實例為大家分享了js實現p色塊拖動錄制的具體代碼，具體內容如下
描述：
實現一個p50*50的色塊，拖動它生成一個軌跡，松手后，這個p會重復你剛才拖動的這個路徑。
效果：
代碼：
<!DOCTYPE html>
<html lang="en"><head> <meta charset="UTF-8">
<title>Title</title>
<style> p { width: 50px; height: 50px; background-color: deepskyblue; position: absolute; border: 2px solid #656565; } </style>
<script src="js/Method.js">
</script>
</head>
<body>
<p>
</p>
<script>
var elem;
var state=0;
//當前的狀態 初始0——拖動錄制1——回放2
var arr=[];//存放我們的行走路徑的 數組
var list=[];//存放我們的行走路徑的 數組
var index=0; init(); function init() { elem=document.querySelector("p");
Method.dragElem(elem);
elem.addEventListener("mousedown",mouseHandler);
elem.addEventListener("mouseup",mouseHandler);
setInterval(animation,16); } function mouseHandler(e) {
//當前的狀態 初始0——拖動錄制1——回放2
if(e.type==="mousedown"){
//鼠標按下
state=1; }else if(e.type==="mouseup"){
//鼠標抬起
createElemShadow();
state=2;
}
}
function createElemShadow() {
var bool=false;
if(list.length===0) bool=true;
for(var i=0;i<5;i++){
if(bool)list.push(elem.cloneNode(false));
list[i].style.opacity=1-i*0.2;
document.body.appendChild(list[i])
}
}
function animation() {
if(!state) return;
if(state===1){
record();
}else if(state===2){
play();
}
}
function record() {
var rect=elem.getBoundingClientRect();
arr.push({x:rect.x,y:rect.y}); }
function play() {
/* if(index>=arr.length-1){
state=0; return; }*/
index++;
var point=arr[index];
if(point){
elem.style.left=point.x+"px";
elem.style.top=point.y+"px";
elem.style.backgroundColor=Method.pColor(); }
var bool=false;
for(var i=0;i<list.length;i++){
if(!arr[index-i*2]) continue;
list[i].style.left=arr[index-i*2].x+"px";
list[i].style.top=arr[index-i*2].y+"px";
list[i].style.backgroundColor=Method.pColor();
bool=true; }
if(!bool){
state=0;
for(var j=0;j<list.length;j++){
list[j].remove();
}
}
}
</script>
</body>
</html>
看完上述內容，你們對js如何實現div色塊拖動錄制有進一步的了解嗎？如果還想了解更多知識或者相關內容，請關注億速云行業資訊頻道，感謝大家的支持。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
