js实现了从分析过程中的回放和拖动轨迹。

今天有点高兴，CSDN博客超过一百万，过去从未到过如此高的水平，不得不说，太多的时间或一些虚伪的，可以看到这些鼓励还是忍不住的快乐，至少，让我有一个行的人，我不孤单。

没有太多的谈话，继续今天的记录，记录返回和下降的路径，首先从分析的过程中：

1，要实现重放和拖动跟踪，必须先记录；

2，要记录拖动和拖动，必须拖放。

这个问题做了几天前，执行的时候也有点瑕疵，但一般的实现方法都有了，所以今天在了解的时候，认识到这个问题快了很多，真的很高兴，今天是认识了以后再体会深刻的一点，然后今天再录下来；

至于跟踪记录的拖动分析，长话短说，毕竟都做过一次：

1，现在确定div的位置和状态，以确保绝对可以拖动。

2，监视鼠标拖动事件（昨天总结的几个鼠标事件）；

3、根据相应的鼠标事件，做出相应的响应，在移动鼠标拖放记录存在的问题；

4、听鼠标弹出事件，结束拖放事件和记录点。

这是第一个实现下一个代码（同时列出所有代码，然后逐一分析）：

HTML语言：
这是如此熟悉啊。
Reback / /这是重播
Javaｓｃｒｉｐｔ的部分：
窗口。指针函数（）{
var obj = document.getelementbyid（showzone ）；
VaR disx = Disy = 0；
无功dragif = false；
VaR的位置= { { x：obj.offsetleft，Y：obj。offsettop } }； / /这是实现录音和播放的关键，另一个是获得基本的元素
VaR OA = document.getelementsbytagname（）{ 0 }；

obj。onmousedown =函数（事件）{
风险事件=事件| | window.event；
disx = event.clientx-obj.offsetleft； / / div边界距离相对于鼠标
event.clienty-obj.offsettop Disy =；
dragif = true； / /标志可以拖动

Position.push ({x:obj.offsetLeft, y:obj.offsetTop}); / / record from this time began
返回false；
}；
文件。移动鼠标=函数（事件）{

如果（dragif归来！）这个判断很重要，只要按一下手机就行了。
风险事件=事件| | window.event；
无功nowx = event.clientx-disx； / /根据上述记录鼠标相对距离DIV DIV知道页面之间的相对距离。
新的event.clienty-disy var =；
VaR Maxx = document.documentelement.clientwidth-obj.offsetwidth； / /这是offsetwidth，是div的宽度，不offsetleft
VaR maxy = document.documentelement.clientheight-obj.offsetheight；
nowx = nowx＜00：nowx； / /判断，不要判断边界
新=新<< 00：新；
nowx = nowx > maxxmaxx：nowx；
新=新> maxymaxy：新；

对象的风格。margintop = obj。风格。marginleft = 0；
obj。风格。左= nowx +PX； / /不要忘记+ PX，只有风格。左/上PX
obj。风格。=新+PX；
Position.push（{ x：nowx，Y：新}）； / /记录。
obj .innerHTML =X+ nowx +：+新； / /看到的变化直接
返回false；
}；
文件。onmouseup =函数（）{
dragif = false； / /不允许拖动和记录
obj .innerHTML =X+ obj。offsetleft +：+ obj.offsettop；
}；
oa.onclick =函数（）{
如果返回（position.length = = 1）； / /当只有一个，那就是不动
VaR定时器= setInterval（）函数（）{
VaR OPO = position.pop（）；
OPos（obj.style.left = OPO。x + PX，obj.style.top = OPO。Y + PX）：clearInterval（定时器）； / /这是惊人的写作
}，30）；
返回false；
}；
}；
需要注意的重点，简单地说几句：

1、VaR的位置排列，集点：这一点是移动div的左上角，也就是说我们其实是移动记录集的offsettop DIV offsetleft X坐标Y坐标的左上角，坐标轴你知道怎么画；

2。几个长度或距离在节目中出现，offsetleft、ClientX，offsetwidth，style.left，document.documentelement.clientwidth等等；

3，推（）方法：将元素添加到数组的结尾处，在结束时更改数组的长度；

4、POP（）方法：删除并返回数组的最后一个元素。有两个要点。一个是：返回最后一个元素；第二，删除元素，数组长度较小。

通过这种方式，我们实现了反向回放，我们不需要说太多关于实现的内容。如果我们正在回放，我们将获取并删除数组的第一个值。哈，试着写吧。

不得不说，还是拖动鼠标键盘移动起来舒服，太麻烦了，可以用鼠标来拖动肆无忌惮的啊…天气炎热。伏，但幸运的是，今天…