<div class="jb51code">
<pre class="brush:js;">
<script type="text/javascript">
//那种方式移动
var choMove = false;
//是否绑定过click
var isClick = true;
//引用DIV
var oDiv = null;
//引用Input
var oInput = null;
//封装事件绑定的通用对象
var evnetUtil = {
addEventHandle:function(oElement,evtype,fun){
oElement.attachEvent?oElement.attachEvent("on"+evtype,fun):oElement.addEventListener(evtype,fun,false);
},removeEventHandle:function(oElement,fun){
oElement.detachEvent?oElement.detachEvent("on"+evtype,fun):oElement.removeEventListener(evtype,false);
}
}
//根据开关，来让document的Click事件绑定不同的动画函数
var eventMove = function(event){
var ev = event || window.event;
choMove==true?clickMove(ev):slideMove(ev);
}
//根据鼠标点击位置移动动画一
var clickMove = function(cev){
var mouseX = cev.clientX; //鼠标点击的横坐标
var mouseY = cev.clientY; //鼠标点击的纵坐标
//取消document的click事件绑定的函数，以避免在动画中，击点页面会又一次触发这个动画
evnetUtil.removeEventHandle(document,'click',eventMove);
var setCliMove = setInterval(function(){
var oDivLeft = oDiv.offsetLeft; //DIV在页面中的Left值;
var oDivTop = oDiv.offsetTop; //DIV在页面中的Top值;
/横坐标移动的速，即每30毫秒，移动speedX距离
mouseX-oDivLeft当前DIV与目标点之间的距离，
除以5，就是将这个距离分成5份
分母5不变，距离越小，所以移动速度就越慢
/
var speedX = (mouseX-oDivLeft)/5;
//纵坐标移动的速度，即每30毫秒，移动speedX距离，这个speedY是变化的，距离鼠标点击的位置越近，这个值越小
var speedY = (mouseY-oDivTop)/5;
/这里必需使用向上或向下取舍的函数（Math.ceil和Math.floor）
因为speedX和speedY是一个变化的值，即将DIV和鼠标点击的点X坐标之间的距离，平均分成5分，
mouseX == oDiv.offsetLeft就永远不可能相等，就不会执行if里面的语句了,所以这将一直循环下去
*/
oDivLeft = mouseX-oDivLeft>0?Math.ceil(oDivLeft+speedX):Math.floor(oDivLeft+speedX);
oDivTop = mouseY-oDivTop>0?Math.ceil(oDivTop+speedY):Math.floor(oDivTop+speedY);
console.log(oDivLeft);
//用当位置的TOP或left值，去加上每一次，即每30毫秒移动的距离，就得到新的坐标
oDiv.style.left = oDivLeft + "px";
oDiv.style.top = oDivTop + "px";
//如果到达鼠标点击的位置
if(mouseX == oDiv.offsetLeft && mouseY == oDiv.offsetTop){
//清除这个运动动画
clearInterval(setCliMove);
//恢复document的click绑定的事件
evnetUtil.addEventHandle(document,eventMove);
}
},30);
}
//根据标鼠标轨迹移动动画二
var slideMove = function(cev){
alert("正在制做当中……");
}
//绑定事件,改变input状态（事件对象，input对象，标识点击的那个Input）
var binds = function(cev,oElem,index){
//防止多次点击同一个Input
if(oElem.className == ""){
oElem.value=oElem.value+"(已激活)"
oElem.className = "cur";
}
//点击不同的input显示不同文字和启用不同动画开关
if(index==0){
oInput[1].value = "根据标鼠标轨迹移动";
oInput[1].className = "";
choMove = true;
}else{
oInput[0].value = "根据鼠标点击位置移动";
oInput[0].className = "";
choMove = false;
}
//只绑document定一次,再次点击无需绑定，只需要启用不同的动画模式
if(isClick){
evnetUtil.addEventHandle(document,eventMove);
isClick = false;
}
//防止冒泡
cev.stopPropagation ?cev.stopPropagation() : (cev.cancelBubble=true);
}
window.onload = function(){
oInput = document.getElementsByTagName("input");
oDiv = document.getElementsByTagName("div")[0];

oInput[0].onclick = function(event){
var This = this;
var ev = event || window.event;
binds(ev,This,0);
}

oInput[1].onclick = function(event){
var This = this;
var ev = event || window.event;
binds(ev,1);
}
}