CSS3_扇形導航_transitionend 事件

時間 2019-11-08
標籤 css3 css 扇形導航 transitionend 事件欄目 CSS 简体版
原文原文鏈接
扇形導航javascript
圓形按鈕，切換一系列圖片導航的顯示與隱藏。css
若是涉及過渡動畫，定位的 top 和 left 必須寫html
Math.sin(弧度)java
一圈弧度 = 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>
相關標籤/搜索
每日一句
每一个你不满意的现在，都有一个你没有努力的曾经。