本文实例为大家分享了js实现div色块拖动录制的具体代码,供大家参考,具体内容如下
<强>描述:
实现一个div50 * 50的色块,拖动它生成一个轨迹,松手后,这个div会重复你刚才拖动的这个路径。
<>强效果:
<强>代码:
& lt; !DOCTYPE html>
& lt; html lang=癳n”比;
& lt; head>
& lt;元charset=皍tf - 8”比;
& lt; title> Title
& lt; style>
div
{
宽度:50 px;
高度:50 px;
background - color: deepskyblue;
位置:绝对的;
边界:2 px固体# 656565;
}
& lt;/style>
& lt;脚本src=" https://www.yisu.com/zixun/js/Method.js "祝辞& lt;/script>
& lt;/head>
& lt; body>
& lt; div> & lt;/div>
& lt; script>
var elem;
var状态=0;//当前的状态初始0,拖动录制1——回放2
var arr=[];//存放我们的行走路径的数组
var=[];列表//存放我们的行走路径的数组
var指数=0;
init ();
init()函数{
elem=document.querySelector (" div ");
Method.dragElem (elem);
elem.addEventListener (“mousedown”, mouseHandler);
elem.addEventListener (“mouseup”, mouseHandler);
setInterval(动画、16);
}
函数mouseHandler (e){//当前的状态初始0,拖动录制1——回放2
如果(e.type===癿ousedown”){//鼠标按下
国家=1;
}else if (e.type===癿ouseup”){//鼠标抬起
createElemShadow ();
国家=2;
}
}
函数createElemShadow () {
var bool=false;
如果(list.length===0) bool=true;
(var i=0; i<5,我+ +){
如果(bool) list.push (elem.cloneNode(假));
[我]列表.style.opacity=我* 0.2;
document.body.appendChild(列出[我])
}
}
函数动画(){
如果(状态)返回;
如果(状态===1){
记录();
}else if(状态===2){
玩();
}
}
函数记录(){
var矩形=elem.getBoundingClientRect ();
arr.push ({x: rect.x y: rect.y});
}
函数玩(){/*如果(index>=arr.length-1) {
国家=0;
返回;
} */指数+ +;
var点=arr(指数);
如果(点){
elem.style.left=point.x +“px”;
elem.style.top=point.y +“px”;
elem.style.backgroundColor=Method.divColor ();
}
var bool=false;
我(var=0; i< list.length;我+ +){
如果(arr ![指数i * 2])继续;
[我]列表.style.left=arr[指数i * 2]。x +“px”;
[我]列表.style.top=arr(指数i * 2) .y +“px”;
[我].style.backgroundColor=Method.divColor列表();
bool=true;
}
如果(! bool) {
国家=0;
(var j=0; j< list.length; j + +) {
列表[j] .remove ();
}
}
}
& lt;/script>
& lt;/body>
& lt;/html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
