原生js实现扇形导航以及动画的坑
第一次发博客，有点紧张。首先来一张效果图。
主要是实现了点击右下角的风扇按钮实现了:
导航栏的开启与关闭，中间伴随着 transition过渡以及transform的2D动画。
上源码：
<!DOCTYPE html> <html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>扇形导航</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
html,body{
height: 100%;
overflow: hidden;
}
#main{
overflow: auto;
height: 100%;
position: relative; }
h1{
color: #1c86e5;
text-align: center;
}
.navigation{
position: fixed;
right:5px ;
bottom: 5px;
height: 40px;
width: 40px;
}
.right-bottom{
height: 40px;
width: 40px;
position: absolute;
border-radius: 50%;
z-index: 1;
transition: 1.5s;
background-color: white;
} img{
position: absolute;
transition: 1s;
}
</style>
<body>
<div id="main">
<h1>扇形导航</h1>
<div class="navigation">
<img src="img/衣服.png" width="40">
<img src="img/礼物.png" width="40">
<img src="img/设置.png" width="40">
<img src="img/返回.png" width="40">
<img class="right-bottom" src="img/风扇.png" width="40">
<!-- <div class="right-bottom">-->
<!-- </div>-->
</div>
</div>
<script>
// 1.在元素首次渲染还没有完成的情况下，是不会触发过渡的
// 2.在绝大部分变换样式切换时，如果变化函数的位置个数、类型不相同也可能不会触发过渡
window.onload=function () {
let imgArr=document.getElementsByTagName('img')
let flag=true
for (let i=0;i<imgArr.length;i++){
imgArr[i].onmousedown=function () {
switch (i) {
case 0:imgArr[i].style.transform='translate(0,-90px) rotate(360deg)scale(1.5)'
imgArr[i].style.opacity=0.3;
imgArr[i].style.transition='300ms';break;
case 1:imgArr[i].style.transform='translate(-45px,-85px) rotate(360deg)scale(1.5)'
imgArr[i].style.opacity=0.3;
imgArr[i].style.transition='300ms';break;
case 2:imgArr[i].style.transform='translate(-90px,-50px) rotate(360deg)scale(1.5)'
imgArr[i].style.opacity=0.3;
imgArr[i].style.transition='300ms';break;
case 3:imgArr[i].style.transform='translate(-100px,0) rotate(360deg)scale(1.5)'
imgArr[i].style.opacity=0.3;
imgArr[i].style.transition='300ms';break; } } imgArr[i].onmouseup=function () {
switch (i) {
case 0:setTimeout(function () {
imgArr[i].style.transform='translate(0,-90px) rotate(360deg)scale(1)'
imgArr[i].style.opacity=1;
},300);break;
case 1:setTimeout(function () {
imgArr[i].style.transform='translate(-45px,-85px) rotate(360deg)scale(1)'
imgArr[i].style.opacity=1;
},300);break;
case 2:setTimeout(function () {
imgArr[i].style.transform='translate(-90px,-50px) rotate(360deg)scale(1)'
imgArr[i].style.opacity=1;
},300);break;
case 3:setTimeout(function () {
imgArr[i].style.transform='translate(-100px,0) rotate(360deg)scale(1)'
imgArr[i].style.opacity=1;
},300);break; }
setTimeout(function () {
imgArr[i].style.transition='1s'
},400)
} }
imgArr[4].onclick=()=>{
if (flag){
for (let i=0;i<imgArr.length-1;i++){
// debugger
imgArr[i].style.transition='1s '+(i*0.12)+'s'
}
imgArr[4].style.transform='rotate(360deg)';
imgArr[0].style.transform='translate(0,-90px) rotate(360deg)'
imgArr[1].style.transform='translate(-45px,-80px) rotate(360deg)'
imgArr[2].style.transform='translate(-90px,-50px) rotate(360deg)'
imgArr[3].style.transform='translate(-100px,0) rotate(360deg)'
} else {
for (let i=0;i<imgArr.length-1;i++){
imgArr[i].style.transition='1s '+((imgArr.length-i-1)*0.12)+'s'
}
imgArr[4].style.transform='rotate(0deg)';
imgArr[0].style.transform='translate(0,0) rotate(0deg)'
imgArr[1].style.transform='translate(0,0) rotate(0deg)'
imgArr[2].style.transform='translate(0,0) rotate(0deg)'
imgArr[3].style.transform='translate(0,0) rotate(0deg)'
}
flag=!flag;
} }
</script>
</body>
</html>
主要的坑有：
1.在元素首次渲染还没有完成的情况下，是不会触发过渡的
2.在绝大部分变换样式切换时，如果变化函数的位置个数类型不相同也可能不会触发过渡
3.感觉内存中变化的太快浏览器可能来不及渲染所以采用定时器，等待浏览器渲染 总结：
实现方法有很多，我这边只是一个特别笨拙的方式。
还可以通过通过修改left，top的值来实现。这样可以利用三角函数，定义函数会优雅一些。
图片来自阿里矢量图标库。
原生js实现扇形导航以及动画的坑的更多相关文章
- 原生js标识当前导航位置（给当前导航一个className=active）
导航html结构为: <div class="header2-nav"> <a href="index.html">首页</a&g ...
- 原生js实现悬浮框滑动动画
最近在做个人博客想做个相册,鼠标悬浮后出现个div并且鼠标移动到哪个相册,div跟随到哪个相片上. <!DOCTYPE html> <html lang="en" ...
- 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前
思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...
- 原生JS实战：分享一个首页进度加载动画！
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...
- 原生JS封装简单动画效果
原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...
- 原生js动画效果（源码解析）
在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...
- 关于错位动画的练习，原生js编写
最近在网上看到一个关于错位动画的文章,感觉非常有趣,便自己练习了一下,文章连接:http://www.w3cplus.com/animation/staggering-animations.html ...
- 用原生JS写移动动画案例及实际应用
js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...
- 原生js判断css动画结束 css 动画结束的回调函数
原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...
随机推荐
- WSL下卸载了zsh / fish后无法启动bash解决方案
最近在鼓捣wsl,感觉自己用还是蛮好用的.听说1903要更新新的cmd,还蛮期待的 解决步骤: 建议先下载个everything , windows下非常好用的文件查找软件. 启动后搜索.bashrc ...
- web----HTML（WEB概述）
## web概述: *JavaWeb: 什么是web,即JavaWeb(使用Java语言开发基于互联网的项目). *软件架构: 1.C/S:Client/Server 客户端/服务器端 *在用户本地有 ...
- HDU-4252 A Famous City（单调栈）
最后更新于2019.1.23 A Famous City ?戳这里可以前往原题 Problem Description After Mr. B arrived in Warsaw, he was sh ...
- MySQL对JSON类型UTF-8编码导致中文乱码探讨
前言 继上文发表之后,结合评论意见并亲自验证最终发现是编码的问题,但是对于字符编码还是有点不解,于是乎,有了本文,我们来学习字符编码,在学习的过程中,我发现对于MySQL中JSON类型的编码导致数据中 ...
- 记录一些服务端术语和搭建web服务器
菜单快捷导航 服务端常用术语 搭建web服务器和配置虚拟主机 记录一些服务端方面的常用术语 1.CS架构和BS架构 1.1 CS架构 CS(Client/Server),基于安装包类型的桌面或手机软件 ...
- 朴素贝叶斯分类器（Naive Bayesian Classifier）
本博客是基于对周志华教授所著的<机器学习>的"第7章 贝叶斯分类器"部分内容的学习笔记. 朴素贝叶斯分类器,顾名思义,是一种分类算法,且借助了贝叶斯定理.另外,它是一种 ...
- python之道14
看代码写结果: def wrapper(f): def inner(*args,**kwargs): print(111) ret = f(*args,**kwargs) print(222) ret ...
- javascript创建函数的方法
函数对任何语言来说都是一个核心的概念.函数,是一种封装(将一些语句,封装到函数里面). 通过函数可以封装任意多条语句,而且可以在任何地方.任何时候调用执行. ECMAScript中的函数使用funct ...
- SQL 实习
一. tem表 group by 分组后,有三个编号,找出最下的订单时间,比较选出时间段内的数据.注意group by 和 having的用法. group by 的用法 不用聚合函数的时候,每类出现 ...
- Python——铅球飞行计算问题
一. 1.IPO描述为:输入:铅球发射角度. 初始速度(m/s). 初始高度(m) 处理:模拟铅球飞行,时刻更新铅球在飞行中的位置 输出:铅球飞行距离(m) 可以拆分小的时间段.任意时刻的位置,都是 ...