扇形导航

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

如果涉及过渡动画，定位的 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. windows下搭建vue开发环境+IIS部署

    原创]win10下搭建vue开发环境  https://www.cnblogs.com/ixxonline/p/6007885.html 特别说明:下面任何命令都是在windows的命令行工具下进行输 ...

  2. CAS server打包小白教程

    如题,cas是耶鲁大学的一个开源的登录系统,功能齐全,受到很多企业的青睐. 耶鲁大学都不知道那你太out了,我告诉你吧!耶鲁大学就是山东一个椰子树长的很多的地方的大学,很牛逼. 很多新手程序员简历都喜 ...

  3. [再寄小读者之数学篇](2014-06-22 求极限 [中国科学技术大学2011年高等数学B考研试题])

    设数列 $\sed{x_n}$ 满足 $0<x_1<\pi$, $x_{n+1}=\sin x_n\ (n=1,2,\cdots)$. (1) 证明 $\dps{\vlm{n}x_n}$ ...

  4. Java部分概念理解

    第1部分 方法 1.1 方法基本概念 1) 方法:用于封装一段特定功能代码,尽可能一个方法至只实现一个基本功能,相当于C语言中的函数: 2) 方法可以多次调用: 3) 避免代码冗余,便于维护,便于团队 ...

  5. 在centos7下安装.net core

    在这里记录下安装的过程: 一开始需要去官网下载centos相关的dotnetcore的sdk 上传到linux,解压,发现需要安装libunwind, 安装libunwind:yum install  ...

  6. Django REST Framework API Guide 07

    本节大纲 1.Permissions 2.Throttling Permissions 权限是用来授权或者拒绝用户访问API的不同部分的不同的类的.基础的权限划分 1.IsAuthenticated ...

  7. 网络学习day04_VLSM、子网划分

    IP子网划分 首先,在进行子网划分的学习之前,我们先来回顾一下IP地址的相关知识,同时了解一下公有和私有IP地址: 在Internet上有千百万台主机,为了区分这些主机,人们给每台主机都分配了一个专门 ...

  8. Linux 运维工作中的经典应用ansible（批量管理）Docker容器技术(环境的快速搭建)

    一 Ansible自动化运维工具 Python 在运维工作中的经典应用 ansible(批量管理操作) .安装ansible(需要bese epel 2种源) wget -O /etc/yum.rep ...

  9. Go学习之路

    注:图片来自 https://github.com/gocn/knowledge, 更新在此,共勉前行者.

  10. 【原创】Java基础之Session机制

    Session机制 JSESSIONID是Session的标识,当客户端请求服务器端的时候,服务器端会检查是否已经给这个客户端创建过Session,也就是看客户端的请求中的header是否有Cooki ...