js如何實(shí)現(xiàn)div色塊拖動(dòng)錄制

發(fā)布時(shí)間：2021-12-01 10:13:25 來源：億速云閱讀：289 作者：柒染欄目：開發(fā)技術(shù)

今天就跟大家聊聊有關(guān)js如何實(shí)現(xiàn)div色塊拖動(dòng)錄制，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

實(shí)例為大家分享了js實(shí)現(xiàn)p色塊拖動(dòng)錄制的具體代碼，具體內(nèi)容如下

描述：

實(shí)現(xiàn)一個(gè)p50*50的色塊，拖動(dòng)它生成一個(gè)軌跡，松手后，這個(gè)p會(huì)重復(fù)你剛才拖動(dòng)的這個(gè)路徑。

效果：

代碼：

<!DOCTYPE html>

<title>Title</title>

</script>

</head>

<body>

<p>

</p>

var elem;

var state=0;

//當(dāng)前的狀態(tài) 初始0——拖動(dòng)錄制1——回放2

var arr=[];//存放我們的行走路徑的數(shù)組

var list=[];//存放我們的行走路徑的數(shù)組

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) {

//當(dāng)前的狀態(tài) 初始0——拖動(dòng)錄制1——回放2

if(e.type==="mousedown"){

//鼠標(biāo)按下

state=1; }else if(e.type==="mouseup"){

//鼠標(biāo)抬起

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>

看完上述內(nèi)容，你們對(duì)js如何實(shí)現(xiàn)div色塊拖動(dòng)錄制有進(jìn)一步的了解嗎？如果還想了解更多知識(shí)或者相關(guān)內(nèi)容，請(qǐng)關(guān)注億速云行業(yè)資訊頻道，感謝大家的支持。

向AI問一下細(xì)節(jié)

js如何實(shí)現(xiàn)div色塊拖動(dòng)錄制

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽