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

忘是亡心i 2022-06-09 00:55 290阅读 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 条评论，290人围观）

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

相关阅读

相关 (div+css特效代码) 导航菜单栏

图效果： ![Center][] Jsp代码： <%@ page language="java" import="java.util.*" pageEnco...

墨蓝/ 2024年04月17日 23:15/ 0 赞/ 74 阅读

相关移动端左右滚动（无滚动条）导航栏

方法一：flex和overflow-y 下面这两条css属性，能够帮助我们实现移动端导航栏，左右滚动，但有滚动条。 display: flex; ov

秒速五厘米/ 2023年03月04日 09:14/ 0 赞/ 8 阅读

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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