javascript鼠标点击页面，移动DIV

<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,evtype,fun){
            oElement.detachEvent?oElement.detachEvent("on"+evtype,fun):oElement.removeEventListener(evtype,fun,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,'click',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,'click',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,This,1);
        }
    }    
</script>

 在线实例：http://www.027lover.com/jsdemo/movediv.html

一、原理分析：

1.怎么移动？

要移动DIV到指到的坐标点（X，Y），其实质，就是同时改变DIV的DIV.style.top 和 DIV.style.left 这两个值;

2.如何看到移动？

因为要有移动效果，而不是突然间就将某个DIV的TOP和LEFT值变化为另一个值，所以就要用到:

setInterval这个阻塞函数，让函数的执行，延迟，这样就能看到移动效果。（只要是有的运动和移动都要用到这个函数）;

二、现实思路

1.速度

有运动，肯定就离不开速度这个概念，在这个例子中，速度是变化的，即DIV和鼠标点击的坐标，之间的距离越大，这个速度应该越快。反之速度越慢。以保证在同一个时间内，完成不同距离的运动。

所以 速度=距离/固定值;

这样，当距离越大，速度越快。反之越小

2.如何判断DIV移动到了鼠标点击的点？

即：DIV的LEFT值和TOP值，与鼠标点击时的X和Y值都相等。

在这个例子中。要使用函数（Math.ceil和Math.floor） 具体可以看代码中的注释

总结：写这个的时候想的太复杂，所以卡了好半天。思路一定要理清，再动手。

DEMO下载