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

Posted 2020-08-09

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

 

html:

 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>

CSS:

 1 <style>
 2 *{
 3     padding: 0;
 4     margin:0;
 5     box-sizing: border-box;
 6 }
 7 .clearfix{
 8     clear: both;
 9 }
10 .content{
11     background: #000;
12     width: 100%;
13     height: 630px;
14     padding-top: 100px;
15 }
16 .navigation{
17     width: 900px;
18     height: 45px;
19     margin: 0 auto;
20     border-radius:10px; 
21     background:#fff url(‘../images/rss.png‘) no-repeat right center;
22     position: relative;
23 }
24 .navigation>ul{
25     list-style: none;
26     width: 666px;
27     height: 45px;
28     position: relative;
29     z-index: 10;
30 }
31 
32 .navigation>ul>li{
33     float: left;
34     width: 83px;
35     height: 45px;
36     line-height: 45px;
37     text-align: center;
38     cursor: pointer;
39 }
40 .moveObj{
41     position: absolute;
42     left: 0;
43     top: 0;
44     z-index: 5;
45 }
46 </style>

View Code

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:

 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 }

script.js:

 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 }

 

效果展示：

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

 

 

 

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