使用『jQuery』『原生js』制作一个导航栏动效 —— { }
效果
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』制作一个导航栏动效 —— { }的更多相关文章
- 用原生JS实现的一个导航下拉菜单，下拉菜单的宽度与浏览器视口的宽度一样（js+html+css）
这个导航下拉菜单需要实现的功能是:下拉菜单的宽度与浏览器视口的宽度一样宽:一级导航只有两项,当鼠标移到一级导航上的导航项时,相应的二级导航出现.在本案例中通过改变二级导航的高度来实现二级导航的显示和消 ...
- 放弃jQuery，使用原生js吧！
转自:http://itakeo.com/blog/2015/07/28/nojq/ 随着IE6.7.8的逐渐淘汰,HTML5的兴起,以及侧重点放在了移动端,jQuery可能变的不在那么重要,原生一样 ...
- css+js实现自动伸缩导航栏
用css+js实现自动伸缩导航栏 需要达到的效果: 默认首页选中样式 设置鼠标滑过效果:颜色变化(#f60),宽度变化,字体变化 所涉及的知识点: 布局:float css: 元素状态切换(displ ...
- JavaScript中函数和类(以及this的使用<重点>，以及js和jquery讲解，原生js实现jquery)
1.javascript中以函数来表示类: 一般函数是小写开头:function foo() 类开头是大写:function Foo() 实例化类: obj = new Foo() 其他属性就同类是一 ...
- Rails Guide--Working with JavaScript in Rails; 如何把jquery转化为原生js
1 An Introduction to Ajax 打开网页的的过程也叫:request response cycel. JavaScript也可以request然后parse the respons ...
- 原生js写的一个弧形菜单插件
弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...
- 用原生js来写一个swiper滑块插件
是不是有点印象了,没错,他的最基本的用法就是左右滑动,插件使用者只需要写几行简单的html和js即可实现一个简单滑动效果,不过你完全可以组合各种元素来适应不同的场景. 当然插件我已经写好了,咱 ...
- 【原生JS】制作网页头部刷新进度条
之前的某次番啬看到油管上有这么一个进度条,当时觉得挺好玩,一直想着做一个试试,刚才弄了一下写了一个不算太好看的简陋版本,哈哈. (本博客刷新会头部会出现,因为并没有真正的参与到浏览器加载是否完整这个渲 ...
- JS写的二级导航栏（利用冒泡原理）
今天给大家分享一种用JS写的导航栏,虽然我们工作中不会使用JS来做导航栏,为了练习我们用JS来做一个JS导航栏 这种方法要比其他方法代码量少很多,但是需要对事件冒泡有一定的理解,如果需要理解冒泡可以参 ...
随机推荐
- （数据科学学习手札139）geopandas 0.11版本重要新特性一览
本文示例代码已上传至我的Github仓库https://github.com/CNFeffery/DataScienceStudyNotes 1 简介 大家好我是费老师,就在几天前,geopandas ...
- centos7.6部署DRBD提示“no resources defined!
环境准备: node1(主节点)IP: 192.168.26.30 主机名:node1node2(从节点)IP: 192.168.26.31 主机名:node2 1.关闭防火墙和selinux #se ...
- freeswitch拨打分机号源代码跟踪
概述 freeswitch是一款非常好用的开源VOIP软交换平台. 之前我们有介绍过使用fs拨打分机号的方法,其中代码流程是比较复杂的,所以单独开一章介绍. fs拨打分机号,是使用send_dtmf接 ...
- 腾讯云原生数据库TDSQL-C架构探索和实践
作为云原生技术先驱,腾讯云数据库内核团队致力于不断提升产品的可用性.可靠性.性能和可扩展性,为用户提供更加极致的体验.为帮助用户了解极致体验背后的关键技术点,本期带来腾讯云数据库专家工程师王鲁俊给大家 ...
- 【cartographer_ros】六： 发布和订阅路标landmark信息
上一节介绍了陀螺仪Imu传感数据的订阅和发布. 本节会介绍路标Landmark数据的发布和订阅.Landmark在cartographer中作为定位的修正补充,避免定位丢失. 这里着重解释一下Land ...
- 我又造了个轮子：GrpcGateway
我个人对GRPC是比较感兴趣的,最近在玩通过前端调用GRPC.通过前端调用GRPC业界有两种方式:GRPC Web和GRPC JSON转码. GRPC Web 通过JS或者Blazor WASM调用G ...
- 干货分享：小技巧大用处之Bean管理类工厂多种实现方式
前言:最近几个月很忙,都没有时间写文章了,今天周末刚好忙完下班相对早点(20:00下班)就在家把之前想总结的知识点写出来,于是就有了这篇文章.虽无很高深的技术,但小技巧有大用处. 有时我们经常需要将实 ...
- Vue 计算属性 && 监视属性
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8" /> 5 & ...
- web前端要学些什么，学习思路
有没有Web前端大神给个意见 我已学了 html css JS 马上要学Vue或React不知道那个好 需不需要先了解一下jQuery 还需要学些什么
- Luogu3267 [JLOI2016/SHOI2016]侦察守卫 （树形DP）
树形DP,一脸蒙蔽.看了题解才发现它转移状态与方程真不愧神题! \(f[x][y]\)表示\(x\)的\(y\)层以下的所有点都已经覆盖完,还需要覆盖上面的\(y\)层的最小代价. \(g[x][y] ...