扇形导航

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

如果涉及过渡动画，定位的 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. Error creating bean with name

    最近在学一个东西,要使用SSM新建一个案例,是这样滴,我有如下 DeptDAO DeptService DeptServiceImpl DeptController Dept Mybatis 首先,我 ...

  2. 关于设计项目UI界面的软件工具

    关于画UI界面的软件,我在网上找了几个,今天式用这几款软件还可以 1.墨刀:国产的,这个专门画APP界面的,用起来比较简单,有免费版的,要注册才能用,提供云存储,收费版的云存储空间会多一些.网站: h ...

  3. 第四节：IO、序列化和反序列化、加密解密技术

    一. IO读写 这里主要包括文件的读.写.移动.复制.删除.文件夹的创建.文件夹的删除等常规操作. 注意:这里需要特别注意,对于普通的控制台程序和Web程序,将"相对路径"转换成& ...

  4. Java Swing实现一个简单而优美的记事本( 较详细注释 )

    Java Swing实现具有基本功能的记事本 目前实现了: 文件 新建 打开 保存 退出前保存询问 编辑 剪切 复制 粘贴 清除 撤销 格式 字体选择 字体颜色选择 帮助 关于 (样式采用了css与h ...

  5. python 实现简单卷积网络框架

    第一步定义卷积核类: class Filter(object): # 滤波器类 对卷积核进行初始化 def __init__(self,width,height,depth): # initializ ...

  6. 关于Setup Factory 9的一些使用方法

    之前使用的VS自带的InstallShield2015LimitedEdition 打包工具,但是不太灵活,打包长得也难看:后来使用Setup Factory 9 打包winform应用程序,用起来轻 ...

  7. PYthon3：函数实现“自动售卖机”功能

    题目: 自动贩卖机: # 只接受1元.5元.10元的纸币或硬币,可以1块,5元,10元.# 饮料只有橙汁.椰汁.矿泉水.早餐奶,售价分别是3.5,4,2,4.5# 写一个函数用来表示贩卖机的功能:用户 ...

  8. 万维网WWW详解

    万维网WWW(World Wide Web)并非某种特殊的计算机网络,万维网是一个个大规模的.联机式的信息储藏所,英文简称Web. 万维网使用链接的方式能非常方便地从英特网上的一个站点访问到一个站点, ...

  9. SQL 两个表有关联，通过其中一个表的列，更新另一个表的列。

    换了工作又开始写SQL了. update dic_rate_package set post_next_day=t.post_next_day from dic_package t inner joi ...

  10. GNU MAKE参考文档

    1.GNU MAKE翻译 https://blog.csdn.net/xiejinfeng850414/article/details/8625468 2.Linux Makefile 生成 *.d ...