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 相关文章推荐
关于html+ashx开发中几个问题的解决方法
Jul 18 Javascript
Jquery中使用setInterval和setTimeout的方法
Apr 08 Javascript
js隐式全局变量造成的bug示例代码
Apr 22 Javascript
每天一篇javascript学习小结(String对象)
Nov 18 Javascript
JavaScript简单获取页面图片原始尺寸的方法
Jun 21 Javascript
angularjs 中$apply,$digest,$watch详解
Oct 13 Javascript
webpack 1.x升级过程中的踩坑总结大全
Aug 09 Javascript
详解JavaScript中的数组合并方法和对象合并方法
May 11 Javascript
深入了解JavaScript 的 WebAssembly
Jun 15 Javascript
通过实例了解JS执行上下文运行原理
Jun 17 Javascript
OpenLayers实现图层切换控件
Sep 25 Javascript
Antd中单个DatePicker限定时间输入范围操作
Oct 29 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
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
php文件系统处理方法小结
2016/05/23 PHP
jquery tab标签页的制作
2010/05/10 Javascript
IE6,IE7,IE8下使用Javascript记录光标选中范围(已补全)
2011/08/28 Javascript
JS 打印界面的CSS居中代码适用所有浏览器
2014/03/19 Javascript
javascript使用正则表达式检测IP地址
2014/12/03 Javascript
检测一个函数是否是JavaScript原生函数的小技巧
2015/03/13 Javascript
jquery实现键盘左右翻页特效
2015/04/30 Javascript
原生js实现tab选项卡切换
2020/03/23 Javascript
详解angular笔记路由之angular-router
2017/09/12 Javascript
详解Angular系列之变化检测(Change Detection)
2018/02/26 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
Node.js API详解之 readline模块用法详解
2020/05/22 Javascript
让Python代码更快运行的5种方法
2015/06/21 Python
使用相同的Apache实例来运行Django和Media文件
2015/07/22 Python
Pythont特殊语法filter,map,reduce,apply使用方法
2016/02/27 Python
Zabbix实现微信报警功能
2016/10/09 Python
Python中字典(dict)合并的四种方法总结
2017/08/10 Python
Php多进程实现代码
2018/05/07 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python不使用int()函数把字符串转换为数字的方法
2018/07/09 Python
python matplotlib如何给图中的点加标签
2019/11/14 Python
Python imutils 填充图片周边为黑色的实现
2020/01/19 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
基于css3 animate制作绚丽的动画效果
2015/11/24 HTML / CSS
canvas学习笔记之2d画布基础的实现
2019/02/21 HTML / CSS
recorder.js 基于Html5录音功能的实现
2020/05/26 HTML / CSS
物业管理大学生个人的自我评价
2013/10/10 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
2014企业年终工作总结
2014/12/23 职场文书
小升初自荐信范文
2015/03/05 职场文书
校运会通讯稿
2015/07/18 职场文书
情况说明书格式及范文
2019/06/24 职场文书
CocosCreator ScrollView优化系列之分帧加载
2021/04/14 Python
MYSQL 无法识别中文的永久解决方法
2021/06/03 MySQL
python数字图像处理:图像简单滤波
2022/06/28 Python