js实现div色块拖动录制
更新时间：2020年01月16日 10:15:07 作者：SSSkyCong
这篇文章主要为大家详细介绍了js实现div色块拖动录制，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了js实现div色块拖动录制的具体代码，供大家参考，具体内容如下
描述：
实现一个div50*50的色块，拖动它生成一个轨迹，松手后，这个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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
本篇文章对使用js判断只能输入数字、字母等验证的方法进行了总结介绍，需要的朋友参考下2013-05-05
微信小程序设置全局请求URL及封装wx.request请求操作示例
这篇文章主要介绍了微信小程序设置全局请求URL及封装wx.request请求操作,结合实例形式分析了微信小程序针对wx.requset请求的封装及调用操作相关实现技巧,需要的朋友可以参考下2019-04-04
这篇文章主要介绍了Javascript中对象继承的实现,需要的朋友可以参考下2014-05-05
一个基于JavaScript的代码编辑器，CodeMirror支持大量语言的语法高亮,也包括css,html,js等的高亮显示。此外，CodeMirror还支持代码自动完成、搜索/替换、HTML预览、行号、选择/搜索结果高亮、可视化tab、代码自动格式等2017-03-03
这篇文章主要给大家介绍了关于ECharts坐标轴刻度数值处理的相关资料,文章介绍了一个用于图表Y轴数值简写的函数,它可以将大数值转换为K、M、B等简写形式,从而使图表更加美观和易读,需要的朋友可以参考下2024-11-11
JavaScript 可用来在数据被送往服务器前对 HTML 表单中的这些输入数据进行验证。被 JavaScript 验证的这些典型的表单数据有：用户是否已填写表单中的必填项目？用户输入的邮件地址是否合法？用户是否已输入合法的日期？用户是否在数据域 (numeric field) 中输入了文本？2014-09-09
XMLHttpRequest对象_Ajax异步请求重点(推荐)
下面小编就为大家带来一篇XMLHttpRequest对象_Ajax异步请求重点(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-09-09
本文主要介绍了JavaScript WeakMap的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-02-02
JavaScript的模块化:封装(闭包),继承(原型) 介绍
在复杂的逻辑下， JavaScript 需要被模块化，模块需要封装起来，只留下供外界调用的接口。闭包是 JavaScript 中实现模块封装的关键，也是很多初学者难以理解的要点2013-07-07
这篇文章主要介绍了JavaScript检查弹出窗口是否被阻拦的方法技巧,本文用于检测window.open弹出的窗口是否被阻拦,需要的朋友可以参考下2015-03-03
最新评论