CSS3_扇形导航_transitionend 事件

扇形导航

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

如果涉及过渡动画，定位的 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>

 

posted @ 2018-11-13 14:49  耶梦加德  阅读(366)  评论(0)  编辑  收藏  举报