原生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 ...
随机推荐
- iOS开发如何面对疫情过后的面试高峰期 ！
2020年本应该是一个 "爱你.爱你"的年份!却因为 黑天鹅 给我们带来非常大的影响! 一.2020年iOS招聘数据分析 这里是 2020年3月份BOSS直聘 北京iOS招聘前几页 ...
- 【攻防世界】simple-unpack
知识:upx脱壳 simple-unpack 难度系数: 3.0 题目来源: 暂无 题目描述:菜鸡拿到了一个被加壳的二进制文件 提示说有壳子:然后用PE分析发现是ELF upx的壳子
- List集合概述和特点
List集合概述 有序集合(也称序列)用户可以精确控制列表的每一个元素的位置插入,用户可以通过整数索引访问元素,并搜索列表中的元素 与set集合不同,列表通常允许重复的元素 List集合的特点 有序: ...
- SpringCloud系列之服务注册发现（Eureka）应用篇
@ 目录 前言 项目版本 Eureka服务端 Eureka客户端 服务访问 前言 大家好,距离上周发布的配置中心基础使用已过去差不多一周啦,趁着周末继续完善后续SpringCloud组件的集成,本次代 ...
- Python中的数值类型总结
本文参考书:<Learning Python>中文版--<Python 学习手册>第四版 Python中包含大量的数值类型,他们中的大部分与其他编程语言保持一致,因此学习他们就 ...
- OpenCV-Python 交互式前景提取使用GrabCut算法 | 三十五
目标 在本章中, 我们将看到GrabCut算法来提取图像中的前景 我们将为此创建一个交互式应用程序. 理论 GrabCut算法由英国微软研究院的Carsten Rother,Vladimir Kolm ...
- coding++：Linux - Shell - 常用命令
1.在多个文件中 查找内容 find . -type f -name "*.html" | xargs grep "1"
- vue配置环境踩坑
Vue 环境配置踩坑 目录 Vue 环境配置踩坑 windows下cnpm -v :无法将"cnpm"项识别为 cmdlet.函数.脚本文件或可运行程序的名称. windows下c ...
- A. Array with Odd Sum Round #617（水题）
A. Array with Odd Sum time limit per test 1 second memory limit per test 256 megabytes input standar ...
- js中常见的数据加密与解密的方法
加密在我们前端的开发中也是经常遇见的.本文只把我们常用的加密方法进行总结.不去纠结加密的具体实现方式(密码学,太庞大了). 常见的加密方式 常见的加密算法基本分为这几类, 线性散列算法(签名算法)MD ...