JS实现常用导航鼠标下经过下方横线自动跟随效果
作者:JL 发布时间:2024-04-17 10:11:55
标签:js,导航,自动跟随
js写常用导航鼠标下经过下方横线自动跟随
html代码如下:
<div class="header">
<ul class="nav fr">
<li class="nav-item nav-line">
<a href="/" class="nav-link">首页</a>
</li>
<li class="nav-item nav-line">
<a href="/" class="nav-link">公司介绍</a>
</li>
<li class="nav-item nav-line">
<a href="/" class="nav-link">产品及解决方案</a>
</li>
<li class="nav-item nav-line">
<a href="/" class="nav-link">客户案例</a>
</li>
<li class="nav-item nav-line">
<a href="/" class="nav-link">联系我们</a>
</li>
</ul>
<div class="wrap-line" style="opacity:0"></div>
</div>
css代码如下:
.header{position: absolute; height: 60px; top: 0; left: 0; right: 0; color: #fff;background: rgba(0,0,0,.3); }
.header ul{ padding: 0; margin: 0;}
.header .nav-item{ padding: 0 20px; display: inline-block;}
.header .nav-item a{ text-decoration: none;}
.header .nav-item .nav-link, .header .nav-item:hover .nav-link {color: #fff;}
.header .nav-item .nav-link{ padding: 0; font-size: 15px; height: 60px; line-height: 60px;}
.wrap-line{ display: block; position: absolute; height: 3px; bottom: 5px; background: #fff;}
js代码如下:
<script src="jquery.min.js"></script>
<script>
// 导航滑动效果
$(function () {
$('.nav .nav-line').hover(function() {
$('.wrap-line').stop().animate({
left: $(this).position().left + 25,
width: $(this).outerWidth() - 50,
opacity: 1
});
}, function() {
$('.wrap-line').stop().animate({
opacity: 0
});
});
})
</script>
PS:css + js 实现导航栏下划线跟随鼠标滑动效果
一个vue导航栏下划线跟随鼠标滑动的效果,纯 js + css
滑动效果
下划线会跟随这鼠标滑动,并且激活的item下划线会消失
最终代码
<div class="cc">
<div class="aa_box" ref="aa" @mouseleave="handleMouseLeave">
<div
class="aa_item"
v-for="(i, index) in navList"
:key="i"
@click="aaBtn(index)"
@mouseenter="handleMouseEnter(index)"
:class="{ active: index == activeIndex || moveActiveIndex == index }"
>
{{ i }}
</div>
</div>
<div class="aa-line" :style="{ left: handleX + 'px' }"></div>
</div>
data() {
return {
activeIndex: 0,
moveActiveIndex: null,
X: 0,
current: 0,
aa_x: 0,
mouse_x: 0,
isMove: false
};
},
computed: {
handleX() {
return this.isMove ? this.mouse_x : this.aa_x;
}
},
methods: {
aaBtn(index) {
this.activeIndex = index;
this.aa_x = this.handleMouver(index);
},
handleMouseEnter(index) {
this.isMove = true;
this.moveActiveIndex = index;
this.mouse_x = this.handleMouver(index);
},
handleMouseLeave() {
this.isMove = false;
this.mouse_x = 0;
this.moveActiveIndex = null;
},
handleMouver(index) {
const aa = this.$refs["aa"].children;
let num = 0;
for (let i = 0; i < aa.length; i++) {
const item = aa[i];
if (i + 1 <= index) {
const itemWidth = item.clientWidth + 50;
num += itemWidth;
}
}
return num;
}
},
来源:https://www.cnblogs.com/moranjl/p/16699702.html
0
投稿
猜你喜欢
- 如何用php实现APP消息推送现在有很多的消息推送厂商,比如阿里云的消息推送,极光推送,融云的消息推送。他们的原理都是把sdk内置在app里
- 本文为大家分享了pygame游戏之旅的第8篇,供大家参考,具体内容如下定义一个计数函数:def things_dodged(count):
- 我就废话不多说了,大家还是直接看代码吧~# 导入pptx包from pptx import Presentationprs = Presen
- 2022-09-29shell操作:我在使用中是pycharm与数据库建立连接的一个工具。使用的环境:在此处是用在了虚拟环境中。使用场景:一
- 本文代码是使用python抓取京东小米8手机的配置信息首先找到小米8商品的链接:https://item.jd.com/7437788.ht
- time()在PHP中是得到一个数字,这个数字表示从1970-01-01到现在共走了多少秒,很奇怪吧 不过这样方便计算, 要找出前一天的时间
- 元组Python的元组与列表类似,不同之处在于元组的元素不能修改。元组使用小括号,列表使用方括号。元组创建很简单,只需要在括号中添加元素,并
- 1、仅 Safari 和 Opera 识别的 Hack@media all and (min-width:&n
- 同C语言、Java一样,Python中也存在条件选择和循环语句,其风格和C语言、java的很类似,但是在写法和用法上还是有一些区别。今天就让
- 一:模板的理解模板是将一个事物的结构规律予以固定化、标准化的成果。例如:网页的组成需要是html,head,body,你只要按照它的规则来写
- 试一试这个办法:struserlist = struserlist & "<
- 容我废话一下最近几个月,毒教材被曝光引发争议,那些编写度教材的人着实可恶。咱程序员也没有手绘插画能力,但咱可以借助强大的深度学习模型将视频转
- 一、安装mysql软件下载并安装MySQL官方的 Yum Repository,Mysql版本8.0.20wget -i -c h
- 本文介绍了使用python wasmtime来访问rust库的便捷方法,步骤极其简练,可以在生产环境中使用。安装rust target wa
- 1|0 背景由于项目需要,每个月的历史存量数据需要进行一个归档和备份操作,以及一些日志表需要进行一个明细字段清除,让mysql数据库磁盘节省
- python一直被病垢运行速度太慢,但是实际上python的执行效率并不慢,慢的是python用的解释器Cpython运行效率太差。“一行代
- 例如我要测试一个创建网络的接口,需要先拿token值,而获取token的接口请求成功后,将token存在了响应头headers,postma
- 我就废话不多说啦,还是直接看代码吧!list1 = [1,2,3,4]a,b,c,d = list1则a = 1b =2等这种方式只有当左边
- 目录获取二维码部分获取关注状态值解析微信服务器报文大致思路:调用微信带参数二维码接口生成二维码,前端显示二维码同时于服务器进行长链接通信,监
- 最近很少写CSS了,以后也可能写的会很少了,所以还是想把自已的一些经验能和大家分享一下,希望能给大家一些帮助!这篇文章主要写的提高网页在客户