效果

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. 从一道算法题实现一个文本diff小工具

    众所周知,很多社区都是有内容审核机制的,除了第一次发布,后续的修改也需要审核,最粗暴的方式当然是从头再看一遍,但是编辑肯定想弄死你,显然这样效率比较低,比如就改了一个错别字,再看几遍可能也看不出来,所 ...

  2. ClickHouse(03)ClickHouse怎么安装和部署

    本文会介绍如何安装和部署ClickHouse,官方推荐的几种安装模式,以及安装之后如何启动,ClickHouse集群如何配置等. 简单来说,ClickHouse的搭建流程如下: 环境检查,环境依赖安装 ...

  3. Tomcat深入浅出——Servlet(三)

    零.HttpServletRequest 上一篇已经介绍了这个接口,现在补充些内容 首先介绍一下作用域: jakarta.servlet.jsp.PageContext pageContext 页面作 ...

  4. 异构图神经网络笔记-Heterogeneous Graph Neural Network(KDD19)

    自己讲论文做的异构图神经网络的ppt.再转变成博客有点麻烦,所以做成图片笔记. 论文链接:https://arxiv.org/abs/1903.07293

  5. Dapr v1.8 正式发布

    Dapr是一套开源.可移植的事件驱动型运行时,允许开发人员轻松立足云端与边缘位置运行弹性.微服务.无状态以及有状态等应用程序类型.Dapr能够确保开发人员专注于编写业务逻辑,而不必分神于解决分布式系统 ...

  6. 树莓派实战：微信机器人（itchat实现）

    背景 楼主有一台树莓派4B开发板(8G内存版),是目前的顶配机型.这一年来的业余时间,除了写Java.架构方面的文章,也陆续折腾了不少树莓派上的好玩小项目,在此新开一个树莓派实战的文章系列,分享给粉丝 ...

  7. ERROR .web.servlet.DispatcherServlet - Context initialization failed

    自己创建了一个SSM 项目,使用maven的tomcat7 运行报错 ERROR .web.servlet.DispatcherServlet - Context initialization fai ...

  8. Codeforces 缺省源

    #include <cstdio> #include <algorithm> #include <vector> using namespace std; type ...

  9. 造！又有新的生产力语言了「GitHub 热点速览 v.22.30」

    作者:HelloGitHub-小鱼干 你还记得那些 PHP 开发都去哪了吗?转 Golang 了!移动端现在流行什么?Flutter 编程.现在谷歌带着新的生产力语言来了,Carbon,代号:C++ ...

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

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