前言
你相信时光倒流吗，
震惊！！！
代码界一小伙利用javaScript
把一个div的生长周期倒退重演
实现效果
涉及知识点
1.浏览器的滚动事件(onscroll)
2.鼠标的按下事件（mousedown）
3.鼠标的抬起事件（mouseup）
4.鼠标的移动事件（mousemove）
5.光标坐标点的获取、获取事件对象
6.边缘检测
7.定时器(setInterval)
8.数组的方法（push）
完整代码
复制可用（内有注释说明）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style> body,html{ width: 100%; height: 100%; overflow: hidden; position: relative; } *{ margin: 0; padding: 0; } #box{ width: 300px; height: 200px; background: #000; position: absolute; left: 600px; top: 300px; } #tuo{ width: 300px; height: 50px; background: #ccc; } h1 a{ font-size: 10px; color: cornflowerblue; display: block; float: right; } </style>
</head>
<body>
<div id="box">
<h1 id="tuo"><a href="javascript:;" id="d">点击还原轨迹</a></h1>
</div>
</body>
<script> //封装一个id获取函数 function $id(id){ return document.getElementById(id) } //封装一个获取滚动的距离{top:"",left:""} function getScroll(){ if(window.pageYOffset){ return { top:window.pageYOffset, left:window.pageXOffset } }else if(document.documentElement.scrollLeft){ return { top:document.documentElement.scrollTop, left:document.documentElement.scrollLeft } }else{ return { top:document.body.scrollTop, left:document.body.scrollLeft } } } var box =$id("box");//获取拖拽体所容器 var tuo =$id("tuo");//获取拖拽触发容器 var d =$id("d");//获取a标签 var arr = [];//创建一个空数组，用来存储box的移动轨迹 // 1 给拖拽对象tuo创建鼠标按下事件 tuo.onmousedown = function(e){ e = e || window.event;//获取鼠标按下对象 //兼容写法，获取鼠标相对box的位置 var disx = e.offsetX || e.layerX; var disy = e.offsetY || e.layerY; //事件委托，把box的移动事件委托给body document.body.onmousemove = function(e){ //兼容写法，鼠标可视区域+滚动条的距离 var oLeft = (e.clientX + getScroll().left) - disx; var oTop= (e.clientY + getScroll().top) - disy; //边缘检测 if(oLeft<0){ oLeft = 0; } if(oLeft>window.innerWidth - box.offsetWidth){ oLeft = window.innerWidth - box.offsetWidth; } if(oTop<0){ oTop = 0; } if(oTop>window.innerHeight - box.offsetHeight){ oTop = window.innerHeight - box.offsetHeight; } //把最终的值赋给box box.style.left = oLeft + "px"; box.style.top = oTop + "px"; //每移动一次，就往空数组添加数据 arr.push({ "left":box.style.left , "top":box.style.top}) } //事件委托，当检测到鼠标抬起时，让移动事件失效 document.body.onmouseup = function(){ document.body.onmousemove = null; } } //定义一个全局定时器 var timer; //创建点击a标签事件 d.onclick = function(){ var i = arr.length - 1;//i为数组长度 clearInterval(timer)//使用定时器时先清空定时器(重点) timer = setInterval(function(){ //还原轨迹 box.style.left = arr[i].left; box.style.top = arr[i].top; i--;//数组长度-- //当i<0时停止定时器，并让数组清空 if(i<0){ clearInterval(timer) arr = []; } },1000/30)//每1000/30毫秒还原一次 } </script>
</html>
下期再见
