原生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 ...
随机推荐
- fastjson JSONObject.toJSONString 出现 $ref: "$."的解决办法（重复引用）
首先,fastjson作为一款序列化引擎,不可避免的会遇到循环引用的问题,为了避免StackOverflowError异常,fastjson会对引用进行检测. 如果检测到存在重复/循环引用的情况,fa ...
- Nacos作为微服务注册中心，爱不释手的感觉
我觉得Nacos用起来还不错 在使用SpringCloud做分布式微服务架构时,注册中心是必不可少的一个组件.目前可以用的主要有:Eureka.Consul.Zookeeper.今天,我们就来说一下A ...
- python打包为exe文件
1.安装 pyinstaller 包 pip3 install pyinstaller 2.进入python文件目录 进入Python程序文件夹py文件处,按住shift并且右键,在弹出的选项中点击& ...
- u库前戏
u库 ORM:对象关系映射 类 >>> 数据库的一张表 对象 >>> 表的一条记录 对象点属性 >>> 记录某一个字段对应的值 ''' 对象就是一 ...
- 非常详细的 Linux C/C++ 学习路线总结！已拿腾讯offer
创作不易,点赞关注支持一下吧,我的更多原创技术分享,关注公众号「后端技术学堂」第一时间看! 最近在知乎经常被邀请回答类似如何学习C++和C++后台开发应该具体储备哪些基础技能的问题. 本身我从事的的C ...
- 题解 P4344 【[SHOI2015]脑洞治疗仪】
前言 这道题目呢,看上去很难,实际上我们可以用线段树解决这道题目. 正文 我们维护 sum.len.tag.lmax.rmax.ans. sum 就是这段区间非脑洞的个数 len 就是这段区间的长度 ...
- leetcode 每日签到 409. 最长回文串
题目: 最长回文串 给定一个包含大写字母和小写字母的字符串,找到通过这些字母构造成的最长的回文串. 在构造过程中,请注意区分大小写.比如 "Aa" 不能当做一个回文字符串. 注意: ...
- Linux Ubuntu 开发环境配置 ——最具生产力工具一览
Why Linux and Why exactly Ubuntu 首先这里就不做Mac,Linux,Windows三者之争了.只从个人角度分析下: Mac 不差钱(其实Mac作为超级本性价还行),不喜 ...
- OSPF与ACL的综合应用
在企业中OSPF和ACL应用特别广泛,本实验介绍OSPF和ACL具体配置过程 实验拓扑: 实验要求: 1.企业内网运行OSPF路由协议,区域规划如图所示:2.财务和研发所在的区域不受其他区域链路不稳定 ...
- jmeter响应乱码（十四）
方法一: jmeter响应乱码解决方法:在jmeter的bin目录下找到jmeter.propertis这个文件,修改里面的#sampleresult.default.encoding=ISO-885 ...