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

更新時(shí)間：2020年01月16日 10:15:07 作者：SSSkyCong

這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)div色塊拖動(dòng)錄制，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

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

描述：

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

效果：

<

代碼：

<!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——拖動(dòng)錄制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——拖動(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.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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

解析使用js判斷只能輸入數(shù)字、字母等驗(yàn)證的方法(總結(jié))
本篇文章對(duì)使用js判斷只能輸入數(shù)字、字母等驗(yàn)證的方法進(jìn)行了總結(jié)介紹，需要的朋友參考下
2013-05-05
微信小程序設(shè)置全局請(qǐng)求URL及封裝wx.request請(qǐng)求操作示例
這篇文章主要介紹了微信小程序設(shè)置全局請(qǐng)求URL及封裝wx.request請(qǐng)求操作,結(jié)合實(shí)例形式分析了微信小程序針對(duì)wx.requset請(qǐng)求的封裝及調(diào)用操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下
2019-04-04
Javascript中對(duì)象繼承的實(shí)現(xiàn)小例
這篇文章主要介紹了Javascript中對(duì)象繼承的實(shí)現(xiàn),需要的朋友可以參考下
2014-05-05
CodeMirror js代碼加亮使用總結(jié)
一個(gè)基于JavaScript的代碼編輯器，CodeMirror支持大量語(yǔ)言的語(yǔ)法高亮,也包括css,html,js等的高亮顯示。此外，CodeMirror還支持代碼自動(dòng)完成、搜索/替換、HTML預(yù)覽、行號(hào)、選擇/搜索結(jié)果高亮、可視化tab、代碼自動(dòng)格式等
2017-03-03
ECharts坐標(biāo)軸刻度數(shù)值處理方法例子
這篇文章主要給大家介紹了關(guān)于ECharts坐標(biāo)軸刻度數(shù)值處理的相關(guān)資料,文章介紹了一個(gè)用于圖表Y軸數(shù)值簡(jiǎn)寫的函數(shù),它可以將大數(shù)值轉(zhuǎn)換為K、M、B等簡(jiǎn)寫形式,從而使圖表更加美觀和易讀,需要的朋友可以參考下
2024-11-11
Javascript表單驗(yàn)證要注意的事項(xiàng)
JavaScript 可用來(lái)在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。被 JavaScript 驗(yàn)證的這些典型的表單數(shù)據(jù)有：用戶是否已填寫表單中的必填項(xiàng)目？用戶輸入的郵件地址是否合法？用戶是否已輸入合法的日期？用戶是否在數(shù)據(jù)域 (numeric field) 中輸入了文本？
2014-09-09
XMLHttpRequest對(duì)象_Ajax異步請(qǐng)求重點(diǎn)(推薦)
下面小編就為大家?guī)?lái)一篇XMLHttpRequest對(duì)象_Ajax異步請(qǐng)求重點(diǎn)(推薦)。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
JavaScript?WeakMap的具體使用
本文主要介紹了JavaScript?WeakMap的具體使用，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2023-02-02
JavaScript的模塊化:封裝(閉包),繼承(原型) 介紹
在復(fù)雜的邏輯下， JavaScript 需要被模塊化，模塊需要封裝起來(lái)，只留下供外界調(diào)用的接口。閉包是 JavaScript 中實(shí)現(xiàn)模塊封裝的關(guān)鍵，也是很多初學(xué)者難以理解的要點(diǎn)
2013-07-07
JavaScript檢查彈出窗口是否被阻攔的方法技巧
這篇文章主要介紹了JavaScript檢查彈出窗口是否被阻攔的方法技巧,本文用于檢測(cè)window.open彈出的窗口是否被阻攔,需要的朋友可以參考下
2015-03-03