JS_DOM事件之鼠标事件之随鼠标移动

 1 <div class="content">
 2         <nav class="navigation">
 3             <ul id="nav">
 4                 <li>首页新闻</li>
 5                 <li>公司简介</li>
 6                 <li>活动策划</li>
 7                 <li>企业文化</li>
 8                 <li>招聘信息</li>
 9                 <li>员工天地</li>
10                 <li>招聘信息</li>
11                 <li>项目企划</li>
12             </ul>
13             <div class="clearfix"></div>
14             <img src="./images/cloud.gif" class="moveObj" id="moveObj">
15         </nav>
16     </div>

function objAnim(){

    var timer = null;

    //取消定时器
    this.stop = function(){
        clearInterval(timer);
    }

    //向左移动目标距离
    this.moveLeft = function(obj,targetDis,currentDis,time){
        var objTime = time || 100;
        var i = 1;

        var distance = targetDis - currentDis;
        var speed = distance/objTime;

        timer = setInterval(function(){
            if(i == objTime){
                obj.style.left = targetDis+"px";
                clearInterval(timer);
            }else{
                currentDis = currentDis + speed;
                obj.style.left = currentDis + "px";
                //obj.style.left = currentDis+speed*i*runSpeed+"px";
                i++;
            }
        },1)
    }

}

 1 var animator = new objAnim();
 2 
 3 //obj:移动的对象；moveLeft移动的实际距离；width移动的限制距离；maxIdx：移动的最大值
 4 function calcArguments(obj,moveLeft,width,maxIdx){
 5     var moveIdx = parseInt(moveLeft/width)<=maxIdx ? parseInt(moveLeft/width) : maxIdx;
 6     var currentDis = obj.offsetLeft;
 7     var targetDis = moveIdx*width;
 8     
 9     animator.stop();
10     animator.moveLeft(obj,targetDis,currentDis);
11 }

 1 var preTarget = null;
 2 
 3 window.onload=function(){
 4     var nav = document.getElementById("nav");
 5     var moveObj = document.getElementById("moveObj");
 6     var moveObjWidth = moveObj.offsetWidth;
 7 
 8     nav.onmouseover = function(event){
 9         var e = event || window.event;
10         //console.log(e.clientX+","+e.clientY)
11         var moveLeft = e.clientX - nav.parentNode.offsetLeft;
12         var maxIdx = nav.getElementsByTagName("li").length-1;
13 
14         calcArguments(moveObj,moveLeft,moveObjWidth,maxIdx);
15     }
16 }