js實現(xiàn)div色塊拖動錄制
本文實例為大家分享了js實現(xiàn)div色塊拖動錄制的具體代碼,供大家參考,具體內(nèi)容如下
描述:
實現(xiàn)一個div50*50的色塊,拖動它生成一個軌跡,松手后,這個div會重復(fù)你剛才拖動的這個路徑。
效果:
<
代碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div { width: 50px; height: 50px; background-color: deepskyblue; position: absolute; border: 2px solid #656565; } </style> <script src="js/Method.js"></script> </head> <body> <div></div> <script> var elem; var state=0;//當(dāng)前的狀態(tài) 初始0——拖動錄制1——回放2 var arr=[];//存放我們的行走路徑的 數(shù)組 var list=[];//存放我們的行走路徑的 數(shù)組 var index=0; init(); function init() { elem=document.querySelector("div"); Method.dragElem(elem); elem.addEventListener("mousedown",mouseHandler); elem.addEventListener("mouseup",mouseHandler); setInterval(animation,16); } function mouseHandler(e) {//當(dāng)前的狀態(tài) 初始0——拖動錄制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.divColor(); } 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.divColor(); bool=true; } if(!bool){ state=0; for(var j=0;j<list.length;j++){ list[j].remove(); } } } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js 鼠標(biāo)拖動對象 可讓任何div實現(xiàn)拖動效果
- js實現(xiàn)可拖動DIV的方法
- javascript div 彈出可拖動窗口
- 利用javascript移動div層-javascript 拖動層
- js通過八個點 拖動改變div大小的實現(xiàn)方法
- js拖動div 當(dāng)鼠標(biāo)移動時整個div也相應(yīng)的移動
- javascript 可以拖動的DIV(二)
- Javascript實現(xiàn)的類似Google的Div拖動效果代碼
- JavaScript實現(xiàn)可拖拽的拖動層Div實例
- javascript實現(xiàn)div的拖動并調(diào)整大小類似qq空間個性編輯模塊
相關(guān)文章
javascript實現(xiàn)動態(tài)加載CSS
最近在做自己的小框架的按需加載模塊,那么就需要做到異步動態(tài)加載css文件。仔細(xì)研究了一番,得到了如下解決方案,分享給大家。2015-01-01網(wǎng)站內(nèi)容禁止復(fù)制和粘貼、另存為的js代碼
這篇文章主要介紹了JS如何實現(xiàn)網(wǎng)站內(nèi)容如何實現(xiàn)禁止復(fù)制和粘貼、另存為,需要的朋友可以參考下2014-02-02使用JavaScript實現(xiàn)一個小程序之99乘法表
這篇文章主要介紹了使用JavaScript實現(xiàn)一個小程序之99乘法表的相關(guān)資料,需要的朋友可以參考下2017-09-09WEB 前端開發(fā)中防治重復(fù)提交的實現(xiàn)方法
這篇文章主要介紹了JS WEB 前端開發(fā)中防治重復(fù)提交的實現(xiàn)方法,涉及到表單提交的幾種方式介紹,非常不錯具有參考借鑒價值,需要的朋友可以參考下2016-10-10JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹插入節(jié)點、生成二叉樹示例
這篇文章主要介紹了JavaScript數(shù)據(jù)結(jié)構(gòu)與算法之二叉樹插入節(jié)點、生成二叉樹,結(jié)合實例形式較為詳細(xì)的分析了javascript二叉樹相關(guān)概念、定義、節(jié)點插入、遍歷輸出等相關(guān)操作技巧,需要的朋友可以參考下2019-02-02