怎么用HTML+JavaScript实现筋斗云导航栏效果

这篇文章主要介绍了怎么用HTML+JavaScript实现筋斗云导航栏效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用HTML+JavaScript实现筋斗云导航栏效果文章都会有所收获，下面我们一起来看看吧。

功能要求：

1、鼠标经过某个li，筋斗云跟着到当前的位置

2、鼠标离开这个li，筋斗云回到原来的位置

3、鼠标点击了某个li，筋斗云就留在点击这个位置

                                  
        
            
首页            
            
文章
            
动态
            
关注
            
最新热门
        
            
 

window.addEventListener('load', function() {    //获得每个li，以及img    var as = document.querySelectorAll('li')    var img = document.querySelector('img')        //给每个li添加点击事件     as[1].addEventListener('mousemove', function() {        animate(img, 75)    })    as[2].addEventListener('mousemove', function() {        animate(img, 145)    })    as[3].addEventListener('mousemove', function() {        animate(img, 215)    })    as[4].addEventListener('mousemove', function() {        animate(img, 300) //用mousemove事件比mouseover事件要好，防止震动    })    as[0].addEventListener('mousemove', function() {        animate(img, 5)    })    for (i = 0; i < as.length; i++) {        //给每个a添加一个自定义属性，倒是用来作为索引号        as[i].setAttribute('index', i)     }    var posi = 0    console.log(as[0].getAttribute('index'))    for (i = 0; i < as.length; i++) {        as[as[i].getAttribute("index")].addEventListener('mouseout', fn)         function fn() {            animate(img, posi)        }    }    //3，鼠标点击某个li，就固定在这个li上。离开经过某个li，就到某个li上，离开这个li，又回到刚刚的li上，相当于对初始位置的一个刷新     as[1].addEventListener('click', function() {        animate(img, 75)        posi = 75            //删除相应的离开事件    })    as[2].addEventListener('click', function() {        animate(img, 145)        posi = 145    })    as[3].addEventListener('click', function() {        animate(img, 215)        posi = 215    })    as[4].addEventListener('click', function() {        animate(img, 300) //用mousemove事件比mouseover事件要好，防止震动        posi = 300    })    as[0].addEventListener('click', function() {        animate(img, 5)        posi = 5    })})

自己只能做的出这种简单的效果，而且还是bug

1、利用动画函数

2、原先图片的起始位置是0

3、鼠标经过某个li，把当前小li的offsetLeft作为目标值

4、如果点击了某个li，就把当前li的位置存起来，作为图片的起始位置

思路和自己想的是一样的，但是要注意位置的取法，是直接通过元素的点击，去自动获得元素的位置，（但并没有仔细考虑图片应该在文字的中心）

其次，加入了ul的绝对定位，这样可以消除抖动

                                  
                
            
首页新闻
            
师资力量
            
活动策划
            
企业文化
            
招聘信息
            
公司简介
        
    
 

window.addEventListener('load', function() {    var c_nav = document.querySelector('.c-nav')    var cloud = document.querySelector('.cloud')    var lis = document.querySelectorAll('li')    var current = 0 //起始位置；别用手算，肯定是获得某个元素的位置    for (var i = 0; i < lis.length; i++) {        lis[i].addEventListener('mouseenter', function() {                animate(cloud, this.offsetLeft) //鼠标经过时候发生抖动：因为图片过来后，就发生冲突了，此时鼠标就在图片上面            })            //鼠标离开回到起始的位置        lis[i].addEventListener('mouseleave', function() {                animate(cloud, current)            })            //鼠标点击事件        lis[i].addEventListener('click', function() {            // alert(12)            // animate(cloud, this.offsetLeft) //点击了鼠标之后，图片的起始位置就发生改变了            current = this.offsetLeft            for (var i = 0; i < lis.length; i++) {                lis[i].className = ''             }            this.className = 'current'        })     }})

关于"怎么用HTML+JavaScript实现筋斗云导航栏效果"这篇文章的内容就介绍到这里，感谢各位的阅读！相信大家对"怎么用HTML+JavaScript实现筋斗云导航栏效果"知识都有一定的了解，大家如果还想学习更多知识，欢迎关注行业资讯频道。