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

导航栏背景随鼠标移动的案例

HTML:

<div class="content">
        <nav class="navigation">
            <ul id="nav">
                <li>首页新闻</li>
                <li>公司简介</li>
                <li>活动策划</li>
                <li>企业文化</li>
                <li>招聘信息</li>
                <li>员工天地</li>
                <li>招聘信息</li>
                <li>项目企划</li>
            </ul>
            <div class="clearfix"></div>
            <img src="./images/cloud.gif" class="moveObj" id="moveObj">
        </nav>
    </div>

CSS:

<style>
*{
    padding: 0;
    margin:0;
    box-sizing: border-box;
}
.clearfix{
    clear: both;
}
.content{
    background: #000;
    width: 100%;
    height: 630px;
    padding-top: 100px;
}
.navigation{
    width: 900px;
    height: 45px;
    margin: 0 auto;
    border-radius:10px; 
    background:#fff url('../images/rss.png') no-repeat right center;
    position: relative;
}
.navigation>ul{
    list-style: none;
    width: 666px;
    height: 45px;
    position: relative;
    z-index: 10;
}

.navigation>ul>li{
    float: left;
    width: 83px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    cursor: pointer;
}
.moveObj{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 5;
}
</style>

common.js:

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)
    }

}

function.js:

var animator = new objAnim();

//obj:移动的对象；moveLeft移动的实际距离；width移动的限制距离；maxIdx：移动的最大值
function calcArguments(obj,moveLeft,width,maxIdx){
    var moveIdx = parseInt(moveLeft/width)<=maxIdx ? parseInt(moveLeft/width) : maxIdx;
    var currentDis = obj.offsetLeft;
    var targetDis = moveIdx*width;
    
    animator.stop();
    animator.moveLeft(obj,targetDis,currentDis);
}

script.js:

var preTarget = null;

window.onload=function(){
    var nav = document.getElementById("nav");
    var moveObj = document.getElementById("moveObj");
    var moveObjWidth = moveObj.offsetWidth;

    nav.onmouseover = function(event){
        var e = event || window.event;
        //console.log(e.clientX+","+e.clientY)
        var moveLeft = e.clientX - nav.parentNode.offsetLeft;
        var maxIdx = nav.getElementsByTagName("li").length-1;

        calcArguments(moveObj,moveLeft,moveObjWidth,maxIdx);
    }
}

效果展示：

• 首页新闻
• 公司简介
• 活动策划
• 企业文化
• 招聘信息
• 员工天地
• 招聘信息
• 项目企划

 

 

以上内容，如有错误请指出，不甚感激。