js实现div色块拖动录制


Posted in Javascript onJanuary 16, 2020

本文实例为大家分享了js实现div色块拖动录制的具体代码,供大家参考,具体内容如下

描述:

实现一个div50*50的色块,拖动它生成一个轨迹,松手后,这个div会重复你刚才拖动的这个路径。

效果:

js实现div色块拖动录制

js实现div色块拖动录制

代码:

<!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;//当前的状态 初始0——拖动录制1——回放2
    var arr=[];//存放我们的行走路径的 数组
    var list=[];//存放我们的行走路径的 数组
 
    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) {//当前的状态 初始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.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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript中使用构造函数实现继承的代码
Aug 12 Javascript
JQuery实现鼠标移动到图片上显示边框效果
Jan 09 Javascript
ext前台接收action传过来的json数据示例
Jun 17 Javascript
JavaScript fontcolor方法入门实例(按照指定的颜色来显示字符串)
Oct 17 Javascript
Javascript核心读书有感之类型、值和变量
Feb 11 Javascript
js实现超简单的展开、折叠目录代码
Aug 28 Javascript
基于JS实现textarea中获取动态剩余字数的方法
May 25 Javascript
JavaScript程序中实现继承特性的方式总结
Jun 24 Javascript
jQuery实现边框动态效果的实例代码
Sep 23 Javascript
详解js运算符单竖杠“|”与“||”的用法和作用介绍
Nov 04 Javascript
纯js实现悬浮按钮组件
Dec 17 Javascript
vue打开子组件弹窗都刷新功能的实现
Sep 21 Javascript
微信小程序实现二维码签到考勤系统
Jan 16 #Javascript
解决vue+ element ui 表单验证有值但验证失败问题
Jan 16 #Javascript
JavaScript实现简单的计算器
Jan 16 #Javascript
js面向对象之实现淘宝放大镜
Jan 15 #Javascript
js实现简单的打印表格
Jan 15 #Javascript
js实现图片实时时钟
Jan 15 #Javascript
js实现中文实时时钟
Jan 15 #Javascript
You might like
php 购物车的例子
2009/05/04 PHP
用php解析html的实现代码
2011/08/08 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
PHP两种实现无级递归分类的方法
2017/03/02 PHP
Laravel 自定命令以及生成文件的例子
2019/10/23 PHP
浅析jQuery1.8的几个小变化
2013/12/10 Javascript
实例详解jQuery结合GridView控件的使用方法
2016/01/04 Javascript
jQuery实现图片局部放大镜效果
2016/03/17 Javascript
Bootstrap响应式侧边栏改进版
2016/09/17 Javascript
Angular2学习笔记——详解路由器模型(Router)
2016/12/02 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
2017/10/26 Javascript
JS实现的数组去除重复数据算法小结
2017/11/17 Javascript
nodejs 最新版安装npm 的使用详解
2018/01/18 NodeJs
jQuery擦除插件eraser使用方法详解
2020/01/11 jQuery
Vue路由管理器Vue-router的使用方法详解
2020/02/05 Javascript
2020京东618叠蛋糕js脚本(亲测好用)
2020/06/02 Javascript
vue中移动端调取本地的复制的文本方式
2020/07/18 Javascript
使用Python实现下载网易云音乐的高清MV
2015/03/16 Python
分析用Python脚本关闭文件操作的机制
2015/06/28 Python
python+selenium+autoit实现文件上传功能
2017/08/23 Python
Python 新建文件夹与复制文件夹内所有内容的方法
2018/10/27 Python
django使用JWT保存用户登录信息
2020/04/22 Python
使用pyecharts1.7进行简单的可视化大全
2020/05/17 Python
一款纯css3实现的漂亮的404页面的实例教程
2014/11/27 HTML / CSS
来自美国主售篮球鞋的零售商店:KICKSUSA
2017/11/28 全球购物
Gretna Green中文官网:苏格兰格林小镇
2019/10/16 全球购物
护理专业自荐信
2013/12/03 职场文书
广告设计应届生求职信
2014/03/01 职场文书
事假请假条范文
2014/04/11 职场文书
食品工程专业求职信
2014/06/15 职场文书
学校食堂管理制度
2015/08/04 职场文书
队名及霸气口号大全
2015/12/25 职场文书
pytorch finetuning 自己的图片进行训练操作
2021/06/05 Python
pytorch 权重weight 与 梯度grad 可视化操作
2021/06/05 Python
详解Java分布式事务的 6 种解决方案
2021/06/26 Java/Android
win10电脑老是死机怎么办?win10系统老是死机的解决方法
2022/08/05 数码科技