常用的导航栏下划线滚动特效

忘是亡心i 2022-06-09 00:55 283阅读 0赞

很多页面的导航栏经常会用到一些特效，今天直接也谢了一个常用的，就是鼠标移到那个栏目，

下方的横线就会跟着划过去的一个过度效果，用了jq与css3的过度效果实现，接下来贴代码：

<section>
        <nav class="tab-bar clearfix" id="nav-bar">
            <a href="#">公司简介</a><a href="#">企业理念</a><a href="#">荣誉资质</a>
        </nav>
        <div class="slide-middle">
            <div id="slide-border"></div>
        </div>
    </section>

\---------------------------------------------------------------------------CSS-----------------------------------------------------------------------------------------------------------

/*选项卡下方滑块*/ .slide-middle {
        width: 100%;
        max-width: 1200px;
        margin: 0 auto;
    
    }
    
    #slide-border {
        width: 124px;
        margin-top: -1px;
        border-bottom: 1px solid #207dc7;
        position: relative;
        z-index: 15;
        transition: 0.5s all;
    }

----------------------------------------JS----------------------------------------------------------------------------------------------------------

<script>
        $(function () {
            //导航栏下放border滚动特效 $('#nav-bar a').each(function (t) {
                $(this).mouseover(function () {
                  console.log($(this).position('.tab-bar').left);
                  var indexLeft = $(this).position('.tab-bar').left;
                  $('#slide-border').css({
       "left":indexLeft}, 500)
                }).mouseout(function () {
                    $('#slide-border').css({
       "left":0}, 500)
                });
            })
        })
    </script>

发表评论取消回复

表情：

评论列表（有 0 条评论，283人围观）

还没有评论，来说两句吧...

相关阅读

相关 html5导航栏跟随界面_JavaScript图片跟随导航栏特效

今天来分享一个JavaScript图片跟随导航栏特效 ![d34e2d35939d5c5ad8abe614116752ff.gif][] 下面再来看看代码 \\{ma

一时失言乱红尘/ 2023年01月01日 10:47/ 0 赞/ 159 阅读

相关导航菜单中常用的css下划线动画效果-案例

> 导航栏下划线动画在网页设计中是非常常见的交互 [在线展示][Link 1] ![20210625131926419.gif][] [代码][Link 2]

本是古典何须时尚/ 2022年10月10日 01:30/ 0 赞/ 264 阅读

相关 Vue滚动监听导航栏样式变化，实现导航栏绑定内容锚点+滚动动画+vue-router

[https://www.jianshu.com/p/2ad8c8b5bf75][https_www.jianshu.com_p_2ad8c8b5bf75] <tem

柔情只为你懂/ 2022年09月10日 06:30/ 0 赞/ 212 阅读

相关 Vue 滚动导航栏固定(导航吸顶)

[Vue导航条吸顶效果 - 简书][Vue_ -] [https://www.cnblogs.com/nbwsj/p/12122689.html][https_www.cnb

痛定思痛。/ 2022年09月10日 06:30/ 0 赞/ 377 阅读

相关页面滚动的时候自动切换导航栏

解决方法: 页面主体设置相同的结构如: <body> <div class="items"></div> <div class="items"></div> <div

た入场券/ 2022年06月12日 07:15/ 0 赞/ 360 阅读

相关常用的导航栏下划线滚动特效

很多页面的导航栏经常会用到一些特效，今天直接也谢了一个常用的，就是鼠标移到那个栏目，下方的横线就会跟着划过去的一个过度效果，用了jq与css3的过度效果实现，接下来贴代码：

忘是亡心i/ 2022年06月09日 00:55/ 0 赞/ 284 阅读

相关导航栏动画特效（dom实现）

想用纯dom搞一个简单的导航栏特效，本以为一个小时就能搞好，哎对dom理解不够深，一直搞了一下午。。。。。。 html <!DOCTYPE html

亦凉/ 2022年05月09日 03:12/ 0 赞/ 238 阅读

相关移动web--滚动（可以滑动的）导航栏的制作

滑动的导航栏 1. 有时候导航栏的长度过于长，我们为了界面的美观和用户体验，会将导航栏在一行（或则一列）显示，超出部分隐藏，而且不用管内容的长短，有利于前后台数据的交互

r囧r小猫/ 2022年03月30日 10:55/ 0 赞/ 605 阅读

相关不可思议的纯CSS导航栏下划线跟随效果

参考文章“不可思议的纯CSS导航栏下划线跟随效果”[https://www.cnblogs.com/coco1s/p/8657192.html][https_www.cnblo

本是古典何须时尚/ 2021年09月28日 09:26/ 0 赞/ 514 阅读

相关不可思议的纯CSS导航栏下划线跟随效果

先上张图，如何使用纯 CSS 制作如下效果？ ![20190412103519933.png][] 在继续阅读下文之前，你可以先缓一缓。尝试思考一下上面的效果或者动手尝试一

你的名字/ 2021年09月18日 22:18/ 0 赞/ 331 阅读