您好,登录后才能下订单哦!
这篇文章主要介绍了怎么用HTML+JavaScript实现筋斗云导航栏效果的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇怎么用HTML+JavaScript实现筋斗云导航栏效果文章都会有所收获,下面我们一起来看看吧。
功能要求:
1、鼠标经过某个li,筋斗云跟着到当前的位置
2、鼠标离开这个li,筋斗云回到原来的位置
3、鼠标点击了某个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
1、利用动画函数
2、原先图片的起始位置是0
3、鼠标经过某个li,把当前小li的offsetLeft作为目标值
4、如果点击了某个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 } /* 给ul也加上定位之后,就可以消除抖动 */ 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实现筋斗云导航栏效果”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。