效果

HTML部分

<body>

    <nav>

        <div id="nav1">导航1</div>

        <div id="nav2">导航2</div>

        <div id="nav3">导航3</div>

        <span id="underscore"></span>

    </nav>

</body>

CSS 部分

* {

    user-select: none;

    padding: 0;

    margin: 0;

    box-sizing: border-box;

}

body {

    display: flex;

    justify-content: center;

    height: 100%;

    background-color: #333744;

}

nav {

    padding: 20px;

    position: relative;

    width: 300px;

    height: 30px;

    margin-top: 50px;

    display: flex;

    justify-content: space-between;

    align-items: center;

}

nav div {

    font-size: 18px;

    letter-spacing: 2px;

    color: aliceblue;

    cursor: pointer;

}

nav span {

    position: absolute;

    bottom: 0;

    background-color: aliceblue;

    border-radius: 15px;

    width: 100%;

    height: 3px;

    animation: left 0s ease-in-out;

    animation-fill-mode: forwards;

}

@keyframes left {

    from {

        left: 50%;

        width: 100%;

    }

    to {

        left: 18px;

        width: 17.5%;

    }

}

@keyframes center {

    from {

        left: 0;

        width: 100%;

    }

    to {

        left: 123px;

        width: 17.5%;

    }

}

@keyframes right {

    from {

        right: 50%;

        width: 100%;

    }

    to {

        right: 20px;

        width: 17.5%;

    }

}

JavaScript 部分

var speed = 0.5

var tweens = [

    { 'animation': `left ${speed}s ease-in-out`, 'animation-fill-mode': 'forwards' },

    { 'animation': `center ${speed}s ease-in-out`, 'animation-fill-mode': 'forwards' },

    { 'animation': `right ${speed}s ease-in-out`, 'animation-fill-mode': 'forwards' },

]

$(document).ready(function () {

    var navs = document.querySelectorAll('nav div');

    [].forEach.call(navs, (item, index) => {

        item.addEventListener("click", function () {

            $('#underscore').css(tweens[index])

        })

    })

})

使用『jQuery』『原生js』制作一个导航栏动效 —— { }的更多相关文章

  1. 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）

    这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...

  2. 放弃jQuery，使用原生js吧！

    转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...

  3. css+js实现自动伸缩导航栏

    用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...

  4. JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)

    1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...

  5. Rails Guide--Working with JavaScript in Rails; 如何把jquery转化为原生js

    1 An Introduction to Ajax 打开网页的的过程也叫:request response cycel. JavaScript也可以request然后parse the respons ...

  6. 原生js写的一个弧形菜单插件

    弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...

  7. 用原生js来写一个swiper滑块插件

        是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...

  8. 【原生JS】制作网页头部刷新进度条

    之前的某次番啬看到油管上有这么一个进度条,当时觉得挺好玩,一直想着做一个试试,刚才弄了一下写了一个不算太好看的简陋版本,哈哈. (本博客刷新会头部会出现,因为并没有真正的参与到浏览器加载是否完整这个渲 ...

  9. JS写的二级导航栏（利用冒泡原理）

    今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...

随机推荐

  1. windows10 安装MySQL ZIP版本

    今天重新学习了一下MySQL,但是呢刷题网站不知道为什么很卡,输入容易卡死崩溃,于是乎想在win10上面进行安装进行练习. 发现电脑里面没有,于是进行安装. 1.首先下载MySQL https://d ...

  2. C++ 练气期之指针所指何处

    1. 指针 指针是一种C++数据类型,用来描述内存地址. 什么是内存地址? 内存中的每一个存储单元格都有自己的地址,地址是使用二进制进行编码.地址从形态上看是一个整型数据类型.但是,它的数据含义并不表 ...

  3. WPF双滑块控件以及强制捕获鼠标事件焦点

    效果 概述 最近有个小需求要用双滑块表示一个取值范围,于是就简单做了个用户控件,在此记录下. 使用矩形Rectangle表示范围,椭圆Ellipse表示滑块,使用Canvas控制滑块的左右移动. 椭圆 ...

  4. shell查询prometheus数据

    #shell查询prometheus数据 shell使用curl调用HTTP API执行PromQL /api/v1/query查询某一时刻的数据 查询条件PromSQL复杂时, 传入接口/api/v ...

  5. ESXI启用本地登录和SSH服务连接功能，使用Xshell连接

    1.选中Troubleshoot Options进行SSH服务配置 2.开启本地登录功能 3.开启远程连接功能 4.本地登录修改SSH服务允许基于密码登录 默认无法用密码登录ssh服务,只支持基于ke ...

  6. Java代码优化的30个小技巧

    前言 我之前写过两篇关于优化相关的问题:<聊聊sql优化的15个小技巧>和<聊聊接口性能优化的11个小技巧>,发表之后,在全网受到广大网友的好评.阅读量和点赞率都很高,说明了这 ...

  7. CF455ABoredom

    题目大意: 给你一个由 \(n\) 个整数构成的序列 \(a\),玩家可以进行几个步骤,每一步他可以选择序列中的一个元素(我们把它的值定义为 \(a_k\))并删除它,此时值等于 \(a_{k + 1 ...

  8. 我也是醉了，Eureka 延迟注册还有这个坑！

    Eureka 有个延迟注册的功能,也就是在服务启动成功之后不立刻注册到 Eureka Server,而是延迟一段时间再去注册,这样做的主要目的是因为虽然服务启动成功了,可能还有一些框架或者业务的代码没 ...

  9. openstack 虚拟机网卡被重名为cirename0

    虚拟机网卡被重名为cirename0    在虚拟机挂载多网卡情况下,你在虚拟机上卸载网卡后,再创建新的port挂给虚拟机使用,如果虚拟机不经过重启的话,是不会有任何问题的.但是,如果虚拟机重启了,你 ...

  10. 只会Excel想做图表可视化，让数据动起来？可以，快来围观啦（附大量模板下载）

    前言 之前我们分享过基于echarts 的数据可视化展示,很多朋友就说,不会软件开发,可不可以直接用Excel进行数据化的展示. 答案是肯定的,确实有这种方案,百度查询一查一大推,各种解决方案各种模板 ...