第一次发博客，有点紧张。首先来一张效果图。

主要是实现了点击右下角的风扇按钮实现了:

导航栏的开启与关闭，中间伴随着 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实现扇形导航以及动画的坑的更多相关文章

  1. 原生js标识当前导航位置（给当前导航一个className=active）

    导航html结构为: <div class="header2-nav"> <a href="index.html">首页</a&g ...

  2. 原生js实现悬浮框滑动动画

    最近在做个人博客想做个相册,鼠标悬浮后出现个div并且鼠标移动到哪个相册,div跟随到哪个相片上. <!DOCTYPE html> <html lang="en" ...

  3. 原生JS实现全屏切换以及导航栏滑动隐藏及显示——重构前

    思路分析: 向后滚动鼠标滚轮,页面向下全屏切换:向前滚动滚轮,页面向上全屏切换.切换过程为动画效果. 第一屏时,导航栏固定在页面顶部,切换到第二屏时,导航条向左滑动隐藏.切换回第一屏时,导航栏向右滑动 ...

  4. 原生JS实战：分享一个首页进度加载动画！

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5871134.html 该程序是本人的个人作品,写的不好,可以参考,但未经 ...

  5. 原生JS封装简单动画效果

    原生JS封装简单动画效果 一致使用各种插件,有时候对原生JS陌生了起来,所以决定封装一个简单动画效果,熟悉JS原生代码 function animate(obj, target,num){ if(ob ...

  6. 原生js动画效果（源码解析）

    在做页面中,多数情况下都会遇到页面上做动画效果,大部分都是用jquery来实现动画,今天正好看到一篇原生js实现动画效果的代码,特分享在此. 原文地址:http://www.it165.net/pro ...

  7. 关于错位动画的练习，原生js编写

    最近在网上看到一个关于错位动画的文章,感觉非常有趣,便自己练习了一下,文章连接:http://www.w3cplus.com/animation/staggering-animations.html ...

  8. 用原生JS写移动动画案例及实际应用

    js很强大 相信很多人都知道,那么它有哪些强大之处呢?有兴趣的人可以去查查,这里就不赘述了,因为不在本片文章讨论的范围. 我们要讲的是怎么用原生JS写移动动画?我们先举一个最简单的动画例子,很多网站的 ...

  9. 原生js判断css动画结束 css 动画结束的回调函数

    原文:原生js判断css动画结束 css 动画结束的回调函数 css3 的时代,css3--动画 一切皆有可能: 传统的js 可以通过回调函数判断动画是否结束:即使是采用CSS技术生成动画效果,Jav ...

随机推荐

  1. 免注册公众号的三种微信推送消息服务的C#代码实现

    有时候我们需要监控一些网络上的变化,但是每次去刷新网页却又很麻烦,而且大部分刷新的时候网页并没有更新.那么有没有一个工具,可以监控网页变化,并将变化的结果推送到手机微信上呢? 这里有很多应用场景,比如 ...

  2. LeetCode | 707. 设计链表

    设计链表的实现.您可以选择使用单链表或双链表.单链表中的节点应该具有两个属性:val 和 next.val 是当前节点的值,next 是指向下一个节点的指针/引用.如果要使用双向链表,则还需要一个属性 ...

  3. CTF_WriteUp_HTTP——302临时重定向问题

    HTTP--302临时重定向 题目描述 点击给出的链接后,没有发生任何变化. 解决方案 通过擦好看网络请求,可以发现发生了302临时跳转,所以我们无法通过浏览器直接访问未跳转的页面,而flag 可能藏 ...

  4. http服务部署

    [root@xiaoyi ~]# vim /etc/ssh/sshd_config 17行 Port 22 49行 PermitRootLogin yes 观察IP地址与物理机属于同一个网段 打开Fi ...

  5. Pandas和Numpy的一些金融相关的操作(一)

    Pandas和Numpy的一些金融相关的操作 给定一个净值序列,求出最大回撤 # arr是一个净值的np.ndarray i = np.argmax( (np.maximum.acumulate(ar ...

  6. 使用Keras进行深度学习：（五）RNN和双向RNN讲解及实践

    欢迎大家关注我们的网站和系列教程:http://www.tensorflownews.com/,学习更多的机器学习.深度学习的知识! 笔者:Ray 介绍 通过对前面文章的学习,对深度神经网络(DNN) ...

  7. 二分搜索树（Binary Search Tree）

    目录 什么是二叉树? 什么是二分搜索树? 二分搜索树的基本操作 二分搜索树添加新元素 二分搜索树的遍历(包含非递归实现) 删除二分搜索树中的元素 什么是二叉树?   在实现二分搜索树之前,我们先思考一 ...

  8. EF多租户实例：快速实现分库分表

    前言 来到这篇随笔,我们继续演示如何实现EF多租户. 今天主要是演示多租户下的变形,为下图所示 实施 项目结构 这次我们的示例项目进行了精简,仅有一个API项目,直接包含所有代码. 其中Control ...

  9. php _weakup()反序列化漏洞

    概念&原理 序列化就是使用 serialize() 将对象用字符串的方式进行表示: 反序列化是使用 unserialize() 将序列化的字符串构造成相应的对象,为序列化的逆过程. 序列化的对 ...

  10. [noip模拟]散步<dp>

    题目链接:http://begin.lydsy.com/JudgeOnline/problem.php?id=2097 这题A的时候,百感交集五味杂陈............ 就这么一道看起来简单的不 ...