HTML+JS+CSS筋斗云导航栏效果

要求：

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:;">首页</a></li><li><a href="javascript:;">文章</a></li><li><a href="javascript:;">动态</a></li><li><a href="javascript:;">关注</a></li><li><a href="javascript:;">最新热门</a></li></ul><img src="祥云.png" alt=""></div>
</body></html>

window.addEventListener('load', function() {//获得每个li，以及imgvar 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 = 0console.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:;">首页新闻</a></li><li><a href="javascript:;">师资力量</a></li><li><a href="javascript:;">活动策划</a></li><li><a href="javascript:;">企业文化</a></li><li><a href="javascript:;">招聘信息</a></li><li><a href="javascript:;">公司简介</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.offsetLeftfor (var i = 0; i < lis.length; i++) {lis[i].className = ''}this.className = 'current'})}
})

HTML+JS+CSS筋斗云导航栏效果相关推荐

js: 动画筋斗云导航栏仿淘宝关闭二维码
筋斗云导航栏 <!DOCTYPE html> <html> <head lang="en"><meta charset="UTF ...
js+html+css筋斗云导航栏
功能简述图片随着鼠标位置在导航栏上变化而变化当点击某个导航栏时,图片位置迁移到当前导航栏的位置处效果预览实现原理给每个li标签添加鼠标事件当鼠标悬浮于li标签的时候,将当前li标签的off ...
js+css制作导航栏下划线跟随动画，App+H5点击效果
这是使用Vue制作的一个下划线跟随效果,没有使用其他插件目录 1. 制作一个初始的导航栏 2. 增加点击样式 3. 下划线移动最终代码注意事项这是最终效果↓ 一开始从网上查其他人的做法,大部分 ...
CSS + HTML导航栏效果
今天写了一个导航栏,需要的效果如下: 实现的代码思路如下: <!DOCTYPE html> <html lang="en"> <head>< ...
js+css制作导航栏下划线跟随动画，自适应元素尺寸变化，Vue/Uniapp
以前也写过一个差不多的,但上一个写的存在很多问题,尤其是css要使用 justify-content: space-around才能正常计算下滑宽度,导致了在很多场景都不实用,其实那一天就想到更好的解 ...
html js左侧导航栏,js实现简单分页导航栏效果
本文实例为大家分享了js实现分页导航栏效果的具体代码,供大家参考,具体内容如下最终的效果: 1. 分页需要的几个重要参数: 总记录条数: totalCount (查数据库) 每页记录数: pageS ...
html横向导航栏滑动效果,JavaScript实现滑动导航栏效果
本文实例为大家分享了js实现滑动导航栏效果的具体代码,供大家参考,具体内容如下 *{ margin: 0; padding: 0; } .navScroll{ position: relative; ...
html导航图片滚动条,CSS实现导航栏底部动态滚动条效果
预习了CSS3部分的新知识,想着在不使用JS的情况下实现导航栏滚动条效果,如下: 实现滚动条效果,其实就是在标签中让元素的宽度由0变化到100%,代码很简单,如下所示: CSS样式部分: ul.na ...
js导航css,js+css实现导航效果实例
本文实例讲述了js+css实现导航效果的方法.分享给大家供大家参考.具体实现方法如下: 1. 程序代码如下: CSS+JS实现兼容性很好的无限级下拉菜单 *{ margin:0; padding:0; ...

HTML+JS+CSS筋斗云导航栏效果

HTML+JS+CSS筋斗云导航栏效果相关推荐

最新文章

热门文章