扇形导航

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

如果涉及过渡动画，定位的 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. Git——如何将本地项目提交至远程仓库(第一次)

    1.(先进入项目文件夹)通过命令 git init 把这个目录变成git可以管理的仓库. git init 2.把文件添加到版本库中,使用命令 git add .添加到暂存区里面去,不要忘记后面的小数 ...

  2. 利用div绘制细线居中

    利用div配合css代码实现细线方式: 块级元素水平居中步骤: 设置宽度width 设置margin-left:auto; 设置margin-right:auto; 实现方法是,让其左右两边的外边距自 ...

  3. Educational Codeforces Round 52 (Rated for Div. 2)

    题目链接 A. Vasya and Chocolate 题意 已知钱,价格,赠送规则求最多获得巧克力数 思路常规算即可 代码 #include <bits/stdc++.h> #defin ...

  4. mui-选项卡+scroll滚动

    详细操作见代码: <!doctype html> <html> <head> <meta charset="UTF-8"> < ...

  5. 《css网站布局实录》（李超）——读书札记

    1.web表现层技术 2.HTML链接设计思想 3.对信息进行合理的分析.分类与处理来创造商业价值. 4.头部描述浏览器所需信息,主体包含所需要展现的具体内容. 5.HTML(XHTML)XML 6. ...

  6. 51nod 1035 最长的循环节

    正整数k的倒数1/k,写为10进制的小数如果为无限循环小数,则存在一个循环节,求<=n的数中,倒数循环节长度最长的那个数,假如存在多个最优的答案,输出所有答案中最大的那个数. 1/6= 0.1( ...

  7. python3编程练习题

    记录一些基础编程练习题和一些遇见的坑 1)输出0到100的数字,如果数字是3的倍数输出Fizz,5的倍数输出Buzz.同时是3和5的倍数输出FizzBuzz,其他情况则打印原数字 for i in r ...

  8. GIt -- Window下配置 git

    全局配置  git config --global user.name "账户名"  git config --global use r.email '账户邮箱' 生成ssh,命令 ...

  9. rsyslog磁盘辅助(Disk-Assisted)模式踩坑记

    最近公司为方便tracing.排查, 搞全链路日志收集,而我手上的10亿+pv的动态前端服务必然在考虑之列. 之前呢. 都是运维定制的收集方式: 如上图,rsyslog push kafka, 优点嘛 ...

  10. Android开发之字体设置

    默认字体 Android SDK自带了四种字体:"normal"“monospace",“sans”, “serif”,如下:   字体 看这四兄弟长的还是蛮像,我是看不 ...