扇形导航

圆形按钮，切换一系列图片导航的显示与隐藏。

如果涉及过渡动画，定位的 top 和 left 必须写

Math.sin(弧度)

  • 一圈弧度 = 2π，一圈角度 = 360
  • 弧度 = (deg*2π)/360 = (deg*π)/180
  • <!DOCTYPE html>
    
<html>
    
    <head>
    
        <meta charset="UTF-8" />
    
        <title>扇形导航</title>

        <style type="text/css">
    
            body {
    
                width: 100%;
    
                color: #000;
    
                background: #96b377;
    
                font: 14px Helvetica, Arial, sans-serif;
    
            }

            /**** Corner Nav ****/
    
            #corner_nav {
    
                position: fixed;
    
                bottom: 0px;
    
                right: 0px;

                width: 50px;
    
                height: 50px;
    
                padding: 1px 0 0 1px;

                background: #f000;
    
            }

            #corner_btn {
    
                position: absolute;
    
                top: 1px;
    
                left: 1px;
    
                z-index: 5;

                width: 49px;
    
                height: 49px;
    
                border-radius: 50%;
    
                background: url(./img/corner.png) no-repeat;
    
                transition: 1s all ease 0s;
    
                cursor: pointer;
    
            }

            #a_imgs {
    
                list-style: none;
    
                width: 42px;
    
                height: 42px;
    
            }

            #a_imgs img {
    
                display: block;
    
                border-radius: 50%;

                transition: 1s all ease 0s;
    
                opacity: 0.6;
    
            }

            #a_imgs li {
    
                position: absolute;
    
                top: 4px;
    
                left: 4px;

            }
    
        </style>
    
    </head>

    <body>

        <div id="corner_nav"> 

            <div id="corner_btn"></div>

            <ul id="a_imgs">
    
                <li class="aImgLi"><a href="javescript:;"><img src="./img/clos.png" /></a></li>
    
                <li class="aImgLi"><a href="javescript:;"><img src="./img/full.png" /></a></li>
    
                <li class="aImgLi"><a href="javescript:;"><img src="./img/open.png" /></a></li>
    
                <li class="aImgLi"><a href="javescript:;"><img src="./img/prev.png" /></a></li>
    
                <li class="aImgLi"><a href="javescript:;"><img src="./img/refresh.png" /></a></li>
    
            </ul>

        </div>

        <!-- javascript 代码 -->
    
        <script type="text/javascript">

            var cornerBtn = document.getElementById("corner_btn");

            var lis = document.querySelectorAll("li.aImgLi");
    
            var navLength = 200;

            var isOpen = false;
    
            cornerBtn.onclick = function(){
    
                    if(isOpen){
    
                        // 收回
    
                        cornerBtn.style.transform = "rotate(0deg)";

                        for(i=0; i<lis.length; i++){
    
                            lis[i].style.transition = 0.5+"s "+0.1*(lis.length-1-i)+"s";

                            lis[i].style.left = 4+"px";
    
                            lis[i].style.top = 4 +"px";

                            lis[i].style.transform = "rotate(0deg)";
    
                        }
    
                    }else{
    
                        // 释放
    
                        cornerBtn.style.transform = "rotate(-360deg)";

                        var i = 0;
    
                        for(i=0; i<lis.length; i++){
    
                            lis[i].style.transition = 0.5+"s "+0.1*i+"s";

                            lis[i].style.left = -navLength*Math.sin( (90/(lis.length-1))*i*Math.PI/180 )+"px";
    
                            lis[i].style.top = -navLength*Math.cos( (90/(lis.length-1))*i*Math.PI/180 )+"px";

                            lis[i].style.transform = "rotate(-720deg)";
    
                        };

                    };
    
                    isOpen = !isOpen;
    
            };

            // 点击按钮: 按钮放大，透明度为 1
    
            var aImgs = document.getElementById("a_imgs");
    
            aImgs.onclick = function(e){
    
                e = e || window.event;
    
                var obj = e.target || e.srcElement;

                // 单独设置点击元素的样式: 透明度 放大
    
                if(obj.nodeName == "IMG"){
    
                    obj.style.opacity = "1";
    
                    obj.style.transform = "scale(1.5)";

                    // 在过渡结束和，缩小到原来大小
    
//                    window.setTimeout(function(){
    
//                        obj.style.transform = "scale(1)";
    
//                    },1000);

                    /**** transitionend 检测事件结束事件
    
                 必须是 DOM2 级事件绑定 ****/
    
                 /**** 1. 兼容性问题****/
    
                    obj.addEventListener('transitionend', styleBack);
    
                    obj.addEventListener('webkitTransitionEnd', styleBack);    // 小驼峰命名法

                    function styleBack(){
    
                        obj.style.transform = "scale(1)";

                        /**** 2. 解绑问题   PC 端流量不限量，无大影响
    
                                  移动端必须解绑 省流量
    
                                  因为事件存在，需要一定流量监控此事件，
    
                                  且无关触发需要消耗流量执行 ****/
    
                        obj.removeEventListener('transitionend', styleBack);
    
                        obj.removeEventListener('webkitTransitionEnd', styleBack);    // 小驼峰命名法
    
                    };

                };
    
            };

            // 鼠标离开，所有元素回到默认样式
    
            aImgs.onmouseleave = function(){
    
                var allImgs = document.getElementById("a_imgs").children;
    
                var i = 0;
    
                var theImg = null;
    
                for(i=0; i<allImgs.length; i++){
    
                    theImg = allImgs[i].getElementsByTagName("img")[0];
    
                    theImg.style.opacity = "0.6";
    
                };
    
            };

        </script>
    
    </body>
    
</html>

CSS3_扇形导航_transitionend 事件的更多相关文章

  1. 扇形导航 css3

    本篇文章将通过对css3中的2d变化以及过渡进行分析设计 先放上最终效果图                 功能实现:1.给扇形home元素设置点击事件并添加2d旋转 2.给导航栏设置2d旋转 并通过 ...

  2. 原生js实现扇形导航以及动画的坑

    第一次发博客,有点紧张.首先来一张效果图. 主要是实现了点击右下角的风扇按钮实现了: 导航栏的开启与关闭,中间伴随着 transition过渡以及transform的2D动画. 上源码: <!D ...

  3. JavaScript----分层导航 滚动事件

    分层导航 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  4. 简单二级导航JQ事件代码

    $(function()){ $("li").hover(function(){ $(this).children("dl").show() },functio ...

  5. jQuery导航切换功能

    Css ------------------------------------------------------------------------------------------------ ...

  6. Android导航栏ActionBar的具体分析

    尊重原创:http://blog.csdn.net/yuanzeyao/article/details/39378825 关于ActionBar,相信大家并不陌生,可是真正能够熟练使用的也不是许多,这 ...

  7. [JavaScript] JavaScript事件注册,事件委托,冒泡,捕获,事件流

    面试题 event 事件 事件委托是什么? 如何阻止事件冒泡,阻止默认事件呢? Javascript 的事件流模型都有什么? 事件绑定和普通事件有什么区别? Event 对象 Event 对象,当事件 ...

  8. 背水一战 Windows 10 (41) - 控件（导航类）: Frame

    [源码下载] 背水一战 Windows 10 (41) - 控件(导航类): Frame 作者:webabcd 介绍背水一战 Windows 10 之 控件(导航类) Frame 示例Controls ...

  9. WP8.1学习系列(第十九章)——事件和路由事件概述

    我们将介绍在使用 C#.Visual Basic 或 Visual C++ 组件扩展 (C++/CX) 作为编程语言并使用 XAML 进行 UI 定义时,针对 Windows 运行时应用的事件的编程概 ...

随机推荐

  1. 查看linux的cpu信息

    # 总核数 = 物理CPU个数 X 每颗物理CPU的核数 # 总逻辑CPU数 = 物理CPU个数 X 每颗物理CPU的核数 X 超线程数 # 查看物理CPU个数 cat /proc/cpuinfo| ...

  2. 理解 Web 中的Session

    ===================================Session 工作原理是什么?===================================因为 http 协议是无状态 ...

  3. MySQL学习3 - 数据表的操作

    本节掌握 一.存储引擎(了解) 二.mysql支持的存储引擎 1.InnoDB 存储引擎 2.MyISAM 存储引擎 3.NDB 存储引擎 4.Memory 存储引擎 5.Infobright 存储引 ...

  4. UDP 单播、广播、多播

    一.UDP广播 广播UDP与单播UDP的区别就是IP地址不同,广播使用广播地址255.255.255.255,将消息发送到在同一广播网络上的每个主机.值得强调的是:本地广播信息是不会被路由器转发.当然 ...

  5. php 默认保几位小数，末尾为0去掉

    计算保留几位小数,末位为0舍去 // 计算 默认保留1位小数 protected function getSprintf($value,$count,$digit = 1) { $num = 0; i ...

  6. UML各种图总结-精华

    UML(Unified Modeling Language)是一种统一建模语言,为面向对象开发系统的产品进行说明.可视化.和编制文档的一种标准语言.下面将对UML的九种图+包图的基本概念进行介绍以及各 ...

  7. POJ 1410 Intersection （线段和矩形相交）

    题目: Description You are to write a program that has to decide whether a given line segment intersect ...

  8. Struts2优缺点

    优点: (1)  实现了MVC模式,层次结构清晰,使程序员只需关注业务逻辑的实现. (2)  丰富的标签库,大大提高了开发的效率. (3) Struts2提供丰富的拦截器实现. (4) 通过配置文件, ...

  9. 【easy】112.path sum 113.-----------------

    求是否有从根到叶的路径,节点和等于某个值. /** * Definition for a binary tree node. * struct TreeNode { * int val; * Tree ...

  10. remote connect to ubuntu unity

    https://community.nxp.com/thread/220596 putty secure copy protocol can be used to transfer file amon ...