这篇文章主要介绍了怎么用HTML+JavaScript实现筋斗云导航栏效果的相关知识，内容详细易懂，操作简单快捷，具有一定借鉴价值，相信大家阅读完这篇怎么用HTML+JavaScript实现筋斗云导航栏效果文章都会有所收获，下面我们一起来看看吧。
功能要求：
鼠标经过某个li，筋斗云跟着到当前的位置
鼠标离开这个li，筋斗云回到原来的位置
鼠标点击了某个li，筋斗云就留在点击这个位置
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box { position: relative; width: 500px; height: 50px; background-color: grey; } ul li { list-style: none; float: left; text-align: center; height: 40px; line-height: 40px; margin-left: 0px; width: 70px; padding-left: 0px } ul { margin: 0px; height: 50px; line-height: 50px; padding-top: 7px; padding-left: 20px; } a { display: inline-block; width: 100%; padding-left: 0px; text-align: left; color: black; text-decoration: none; } img { position: absolute; top: -5px; left: 5px; width: 60px; height: 60px; opacity: 0.5; } </style> <script src="cloud.js"></script> <script src="animater.js"></script></head> <body> <div class="box"> <ul> <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页</a> </li> <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >文章</a></li> <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >动态</a></li> <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >关注</a></li> <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >最新热门</a></li> </ul> <img src="祥云.png" alt=""> </div></body> </html>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
利用动画函数
原先图片的起始位置是0
鼠标经过某个li，把当前小li的offsetLeft作为目标值
如果点击了某个li，就把当前li的位置存起来，作为图片的起始位置
思路和自己想的是一样的，但是要注意位置的取法，是直接通过元素的点击，去自动获得元素的位置，（但并没有仔细考虑图片应该在文字的中心）
其次，加入了ul的绝对定位，这样可以消除抖动
<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .c-nav { width: 600px; height: 40px; background-color: grey; position: relative; } ul { position: absolute; text-align: center; margin-left: 0px; padding-left: 0px } li { top: 0px; list-style: none; float: left; padding-left: 10px; width: 80px; height: 40px; text-align: center; line-height: 10px; } a { color: black; text-decoration: none; } .cloud { position: absolute; top: 0px; left: 0px; width: 70px; height: 35px; background-image: url(祥云.png); background-repeat: no-repeat; background-position: center; background-size: 100%; opacity: 0.6; } .current a { color: red } </style> <script src="animater.js"></script> <script src="cloud.js"></script></head> <body> <div class="c-nav"> <span class="cloud"></span> <ul> <li class="current"><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >首页新闻</a></li> <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >师资力量</a></li> <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >活动策划</a></li> <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >企业文化</a></li> <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >招聘信息</a></li> <li><a href="javascript:;" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" >公司简介</a></li> </ul> </div></body> </html>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实现筋斗云导航栏效果”知识都有一定的了解，大家如果还想学习更多知识，欢迎关注编程网行业资讯频道。
