今天闲来写了个小效果，纯js开发效果不是特别难，大概逻辑就是把每次移动的x，y分别存成两个数组里面，点击倒放按钮时候在让元素根据数组里面存的“痕迹”走一遍，实现倒放效果下面是代码；
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>倒放</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
.box{
200px;
height: 200px;
background: #ccc;
position: absolute;
}
</style>
</head>
<body>
<button class="btn">倒放</button>
<div class="box"></div>
<script>
let box=document.querySelector('.box');
let btn=document.querySelector('.btn');
var arry=[],arrx=[];//创建两个数组来存储盒子的x和y轴移动过的位置，arrx是来储存x轴位置，arry是储存y轴的
let i;
box.onmousedown=function(e){
arry=[],arrx=[];
var e=e||event;
document.onmousemove=function(e){
var e=e||event;
arrx.push(e.clientX);//把box移动过的x轴数据添加进数组
arry.push(e.clientY);//把box移动过的y轴数据添加进数组
box.style.left=e.clientX-100+'px';
box.style.top=e.clientY-100+'px';
}
}
document.onmouseup=function(e){
document.onmousemove=null;//使move事件失效
}
// 按钮事件
btn.onclick=function(){
// console.log(arrx,arry);
i=arrx.length;//这里的arrx只是用来获取一个长度，也可以写arry因为两个数组的长度是一样的；
// 使用定时器改变位置
setInterval(function(){
i-=1;//索引，这里的i就是上面i
box.style.left=arrx[i]-100+'px';
box.style.top=arry[i]-100+'px';
},100);
}
</script>
</body>
</html>