js如何实现div色块拖动录制
今天就跟大家聊聊有关js如何实现div色块拖动录制,可能很多人都不太了解,为了让大家更加了解,小编给大家总结了以下内容,希望大家根据这篇文章可以有所收获。
实例为大家分享了js实现p色块拖动录制的具体代码,具体内容如下
描述:
实现一个p50*50的色块,拖动它生成一个轨迹,松手后,这个p会重复你刚才拖动的这个路径。
效果:
代码:
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 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[j].remove(); } } } 看完上述内容,你们对js如何实现div色块拖动录制有进一步的了解吗?如果还想了解更多知识或者相关内容,请关注行业资讯频道,感谢大家的支持。