扇形导航

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

如果涉及过渡动画，定位的 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 shell脚本启动 停止 重启jar包

    最近做的微服务jar包想弄在持续集成中自动化部署,所以首先得有一个操作jar包的脚本 只需将jar文件的路径替换到APP_NAME的值就可以了,其他不用改 注意:window编辑的shell文件,通过 ...

  2. SpringBoot系列: CommandLineRunner接口的用处

    ========================================使用 CommandLineRunner 对Spring Bean进行额外初始化==================== ...

  3. Erdos

    Erdős Pál(1913年3月26日-1996年9月20日),匈牙利籍犹太人,发表论文达1475篇(包括和人合写的),为现时发表论文第二多的数学家(第一是Euler):曾和509人合写论文. Er ...

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

    证明不等式: $$\bex 1+x\ln\sex{x+\sqrt{1+x^2}}>\sqrt{1+x^2},\quad x>0. \eex$$ 证明: 令 $x=\tan t,\ 0< ...

  5. [物理学与PDEs]第5章习题7 各向同性材料时稳定性条件的等价条件

    在线性弹性时, 证明各向同性材料, 稳定性条件 (5. 27) 等价于 Lam\'e 常数满足 $$\bex \mu>0,\quad \lm+\cfrac{2}{3}\mu>0.  \ee ...

  6. Javaweb学习笔记——（二十八）——————Servlet3.0、动态代理、类加载器

    web最后一天:完了. Servlet3.0          一.要求         1.MyEclipse10.0或以上版本         2.发布到Tomcat7.0或以上版本 二.步骤   ...

  7. C#常用的单元测试框架

    C#常用的单元测试框架有XUnit .NUnit .MSTest 做过单元测试的同学大概都知道以上几种测试框架,这几种框架除了标注测试类和方法的特性用的不一样之外,XUnit 和 NUnit 是非常相 ...

  8. Ubuntu18.04 LTS 安装部署golang最新版本1.10

    1 步骤 //1 直接安装golang-go 目前最新版本是1.10 sudo apt-get install golang-go //2 向/etc/profile追加以下代码 sudo vim / ...

  9. FM算法(二)：工程实现

    主要内容: 实现方法 Python实现FM算法 libFM   一.实现方法 1.FM模型函数 变换为线性复杂度的计算公式: 2.FM优化目标 根据不同的应用,FM可以采用不同的损失函数loss fu ...

  10. oAuth2授权协议 & 微信授权登陆和绑定 & 多环境共用一个微信开发平台回调设置

    OAuth2(open Auth)开放授权协议 授权码模式流程: 1.浏览器(客户端)点击一个比如使用微信登陆按钮 2.会跳到认证服务器页面,让用户选择是否授权 3.如果用户点击授权,那么会跳转到开始 ...