效果

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设计模式总结—建造者模式

    建造者模式 模式动机与定义 ​ 首先建造者模式的动机是为了创建复杂对象,简化传统的创建方法,提高创建的效率和可读性. ​ 像图中的这个例子,用户的需求是驾驶一辆汽车,但是对于用户来说是不需要了解汽车装 ...

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

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

  3. 本机通过IP地址连接Ubuntu18.04+ on Vmware

    一.Vmware-顶部菜单栏-编辑-虚拟网络编辑器: 点一下 添加一个NAT模式的网络:要记住名称,比如这里我的是VMnet8 子网ip可以自己写,建议全程就都按我这个写,后续方便校对. 点一下 NA ...

  4. 如何用空气质量查询API接口进行快速开发

      空气质量的好坏反映了空气污染程度,它是依据空气中污染物浓度的高低来判断的.空气污染是一个复杂的现象,在特定时间和地点空气污染物浓度受到许多因素影响.来自固定和流动污染物的人为污染物排放大小是影响空 ...

  5. Kubernetes v1.24 基于containerd部署

      k8s每个节点安装containerd.   containerd安装参考<containerd安装博文>:https://www.cnblogs.com/punchlinux/p/1 ...

  6. 《Python编程：从入门到实践》第十八章笔记：Django最基本用法笔记

    最近在看Python编程:从入门到实践,这是这本书"项目3 Web应用程序"第18章的笔记.记录了django最基本的一些日常用法,以便自己查阅. 可能是我的这本书版本比较老,书上 ...

  7. js屏蔽浏览器默认事件

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  8. JDBC与ODBC的区别

    JDBC简介JDBC(Java Data Base Connectivity,java数据库连接)是一种用于执行SQL语句的Java API,它是Java十三个规范之一.可以为多种关系数据库提供统一访 ...

  9. 分享一款免费OPC UA服务器

    OPC UA基于OPC基金会提供的新一代技术,提供安全,可靠和独立于厂商的,实现原始数据和预处理的信息从制造层级到生产计划或ERP层级的传输.通过OPC UA,所有需要的信息在任何时间,任何地点对每个 ...

  10. 关于MySQL function创建的限制

    GreatSQL社区原创内容未经授权不得随意使用,转载请联系小编并注明来源. MySQL 的function创建会有各种限制,经常使用的语句的限制如下: 1.CONTAINS_DYNAMIC_SQL ...