-
移动/ / /方式
无功chomove = false；
是否绑定单击
无功isclick =真；
div参考
无功odiv = null；
输入输入/引用
无功oinput = null；
公共对象事件绑定包
无功evnetutil = { {
AddEventHandle：功能（oelement，evtype，好玩）{
oelement.attacheventoelement.attachevent（+ evtype，好玩）：oelement.addeventlistener（evtype，有趣，假）；
}，
RemoveEventHandle：功能（oelement，evtype，好玩）{
oelement.detacheventoelement.detachevent（+ evtype，好玩）：oelement.removeeventlistener（evtype，有趣，假）；
}
}
根据开关，使文档点击不同动画的事件绑定功能。
无功eventmove =函数（事件）{
VaR EV =事件window.event | |；
chomove = = trueclickmove（EV）：slidemove（EV）；
}
根据动画移动鼠标点击位置
无功clickmove =功能（CEV）{
VaR mouseX = cev.clientx； / /横坐标的鼠标点击
无功多的= cev.clienty； / /垂直坐标，鼠标点击
取消功能文档单击事件绑定，为了避免动画，单击页面将再次触发此动画。
EvnetUtil.removeEventHandle（文档，点击'，eventmove）；
无功setclimove = setInterval（）函数（）{
无功odivleft = odiv.offsetleft； / / div页面左侧的价值；
无功odivtop = odiv.offsettop； / / div页面中的最高值；
横坐标速度 / *移动，即每30毫秒，移动Speedx距离
* mouseX odivleft当前div和目标点之间的距离，
*除以5是把距离分成5部分。
*分母5越小，距离越小，移动速度越慢。
* /
VaR Speedx =（mouseX odivleft） / 5；
该移动 / /速度的纵坐标，每30毫秒，移动Speedx距离，快速的距离是变化的，点击鼠标的接近的位置，这个值小
无功快速=（像老鼠的odivtop） / 5；
这里必须使用向上或向下的功能选择（Math.ceil和数学。楼）
*因为Speedx、快速是一个变化值，DIV和鼠标点击的点的x坐标之间的距离平均分为5分。
* mouseX = = odiv.offsetleft永远是平等的，将不会执行里面的语句，所以这样循环下去
* /
odivleft = mouseX odivleft > 0math.ceil（odivleft + Speedx）：Math.floor（odivleft + Speedx）；
odivtop =老鼠odivtop > 0math.ceil（odivtop +快速）：Math.floor（odivtop +快速）；
console.log（odivleft）；
当每个时间加上顶部或左边的值，即每30毫秒移动距离时，得到新的坐标。
odiv.style.left = odivleft +PX；
odiv.style.top = odivtop +PX；
如果鼠标到达的位置单击
如果（mouseX = = odiv.offsetleft老鼠= = odiv。offsettop）{
清除此动作动画
ClearInterval（setclimove）；
恢复文档单击绑定事件
EvnetUtil.addEventHandle（文档，点击'，eventmove）；
}
}，30）；
}
根据移动鼠标动画的轨迹
无功slidemove =功能（CEV）{
在制作过程中发出警报（）；
}
绑定事件，更改输入的状态（事件对象，输入对象，单击输入徽标）
VaR约束=功能（CEV，OELEM，指数）{
防止同一输入中的多个点击
如果（oelem.classname = ={）
OELEM。值= OELEM。价值+（激活）
oelem.classname =杂种；
}
显示不同的文本，点击不同的输入和不同的动画激活开关。
如果（索引= 0）{
oinput { 1 }。值=将根据鼠标轨迹；
oinput { 1 }。类名= ；
chomove =真；
其他{ }
oinput { 0 }。值=将根据鼠标单击的位置；
oinput { 0 }。类名= ；
chomove = false；
}
只有一个文档，再次单击，不需要绑定，只需要启用不同的动画模式。
如果（isclick）{
EvnetUtil.addEventHandle（文档，点击'，eventmove）；
isclick = false；
}
/ /防止泡沫
cev.stoppropagation cev.stoppropagation（）：（CEV。cancelbubble = true）；
}
在window.onload =函数（）{
oinput = document.getelementsbytagname（输入）；
odiv = document.getelementsbytagname（div）{ 0 }；
oinput { 0 }。onclick =函数（事件）{
var =；
VaR EV =事件window.event | |；
绑定（EV，这，0）；
}
oinput { 1 }。onclick =函数（事件）{
var =；
VaR EV =事件window.event | |；
绑定（EV，这，1）；
}
}
一、原理分析：
1。你怎么动
移动div的参考点（x，y），它的本质是同时改变两值div div.style.top和div.style.left；
2。你怎么看这个运动
因为您希望具有移动效果，而不是突然将div的左值和左值更改为另一个值，所以您需要使用它。
setInterval这堵功能允许执行的函数和延迟，所以你可以看到运动的影响。（只要一些动作中使用此功能）；
二、现实思考
1。速度
速度的概念必然与运动密不可分。在这种情况下，速度是变化的，也就是说，div和鼠标单击坐标之间的距离越大，这个速度就越快。相反，速度越慢。为了保证不同距离的运动同时完成。
因此，速度=距离/固定值；
这样，距离越大，速度越快。反之亦然。
2。如何判断div移动到鼠标的点击点
也就是说，div的左值和顶值等于鼠标单击的x和y值。
在这个例子中，使用的功能（Math.ceil和数学。楼），你可以在代码中看到的注释。
总结：写这篇文章太复杂了，所以它被卡住了半天，这个想法必须明确，然后再做。
以上是本文的全部内容，希望能对您有所帮助，谢谢您的支持！