效果

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. 零基础学Java（1）初识Java程序

    前言 就国内来说,Java毫无疑问是后端语言中的No.1没有之一,所以今天我们也来0基础学习Java!!! Java的好处(针对测试工程师) 面试加分->涨薪 大多数公司服务端用的都是Java, ...

  2. 跟HR在大群吵架是什么体验？

    原创不易,求分享.求一键三连 昨天跟HR负责人在公司大群吵了一架,先说结论:我输了... 事情原委是,老板在周一司庆上聊嗨了,说了一句:我觉得打卡没用,建议取消打卡. 下来后老板在公司论坛发了一个问题 ...

  3. Java开发学习(十一)----基于注解开发bean作用范围与生命周期管理

    一.注解开发bean作用范围与生命周期管理 前面使用注解已经完成了bean的管理,接下来将通过配置实现的内容都换成对应的注解实现,包含两部分内容:bean作用范围和bean生命周期. 1.1 环境准备 ...

  4. 4 zookeeper集群和基本命令

    4 zookeeper集群和基本命令 集群思路:先搞定一台服务器,再克隆出两台,形成集群! 1 安装zookeeper 我们的zookeeper是安装在/opt目录下 2 配置服务器编号 在/opt/ ...

  5. 【摸鱼神器】UI库秒变低代码工具——表单篇（二）子控件

    上一篇介绍了表单控件,这一篇介绍一下表单里面的各种子控件的封装方式. 主要内容 需求分析 子控件的分类 子控件属性的分类 定义 interface. 定义子控件的的 props. 定义 json 文件 ...

  6. 丽泽普及2022交流赛day22 无社论

    开始掉分模式 . T3 有人上费用流了???(id) 不用 TOC 了 . T1 暴力 T2 没看见 任意两圆不相交,gg 包含关系容易维护,特判相切 . 单调栈即可 T3 贪心 T4 神秘题

  7. python的嵌入式开发

    今天晚上注定我要玩一夜这个东西,太爽了,给力! 烧写固件成功, http://blog.csdn.net/Lingdongtianxia/article/details/78248888 要点总结:如 ...

  8. Sphere类定义

    这个类是球体,也就是一会要显示的球体了.这个类继承于Geometrics类,并实现了自己的碰撞检测,碰撞原理,书上也说的很清楚了啊,大家多看.然后对照代码就明白了. 类定义: #pragma once ...

  9. BTDetect用户手册和技术支持

    BTDetect用户手册和技术支持 1. 程序主要功能 BTDetect是BT(BioTechnology) Detect 生物科技检测的缩写.本程序将根据用户的回答推断其两大基因类型.以及具体的小分 ...

  10. mui 登录跳转到首页之后顶部选项卡不灵敏问题

    前段时间开发一个用mui开发app的时候遇到了登录跳转到首页之后顶部选项卡会失灵的问题,多次尝试之后终于解决了,趁现在还有点印象记录一下吧. 一开始我是用mui.openWindow来新开首页的,出了 ...