扇形導航

你若精彩，蝴蝶自來發表於2018-09-06
<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            
            *{
                margin: 0;
                padding: 0;
            }
            html,body{
                height: 100%;
                overflow: hidden;
            }
            
            #wrap{
                position: fixed;
                right: 15px;
                bottom: 15px;
                width: 50px;
                height: 50px;
                
            }
            
            #wrap > #inner{
                height: 100%;
            }
            
            #wrap > #inner>img{
                position: absolute;
                left: 0;
                top: 0;
                bottom: 4px;
                border-radius: 50%;
                
            }
            #wrap > #home{
                position: absolute;
                top: 0;
                left: 0;
                z-index: 1;
                background: url(img/home.png) no-repeat;
                border-radius: 50%;
                height: 100%;
                width: 100%;
                transition: 1s;
            }
            
        </style>
    </head>
    <body>
        <div id="wrap">
            <div id="inner">
                
                <img src="img/clos.png" alt="" />
                <img src="img/full.png" alt="" />
                <img src="img/open.png" alt="" />
                <img src="img/prev.png" alt="" />
                <img src="img/refresh.png" alt="" />
                
            </div>
            <div id="home">
                
            </div>
        </div>
    </body>
    <script type="text/javascript" src="js/jquery-1.10.1.js" ></script>
    <script>
        var flag = true;
        var c = 140
        
        $(function(){
            
            $imglist =  $("#inner>img");
    
            
            $("#home").click(function(){
                if (flag) {
                    $(this).css("transform","rotate(-720deg)");
                    $imglist.each(function(i){
                        $(this).css('transition',"1s "+(i*0.1)+"s")
                        $(this).css('transform',"rotate(-720deg) scale(1)")
                        var left = -getPoint(c,90*i/($imglist.length-1)).left+"px"
                        var top = -getPoint(c,90*i/($imglist.length-1)).top+"px"
                        $(this).css('left',left)
                        $(this).css('top',top)
                    })
                }
                else{
                    
                    $(this).css("transform","rotate(0deg)");
                    $imglist.each(function(i){
                        $(this).css('transition',"1s "+(($imglist.length-1-i)*0.1)+"s")
                        $(this).css('transform',"rotate(0deg) scale(1)")
                        $(this).css('left',"0px")
                        $(this).css('top',"0px")
                    })
                    
                    
                }
                flag = !flag;
                
                
                
            })
            //已知第三邊 得到橫縱座標
                function getPoint(c,deg){
                    var left = c*Math.sin(deg*Math.PI/180)
                    var top = c*Math.cos(deg*Math.PI/180)
                    return {left:left,top:top}
                }
            
            function fn(){
                $(this).css("transition","1s");
                $(this).css("transform","rotate(-720deg) scale(1)");
                $(this).css("opacity","1");
                $(this).off('transitionend',fn)
            }
            
            $imglist.each(function(i){
                $(this).click(function(){
                    $(this).css("transition","0.5s");
                    $(this).css("transform","rotate(-720deg) scale(2)");
                    $(this).css("opacity","0.1");
                    //放大之後 實現了效果，然後要給每一個都賦予旋轉，要不然的話，收回去的時候就沒有了旋轉的效果了
                    //transform個數和位置都要一樣，所以都必須要有兩個，要不然的話是不生效的。
                    $(this).on('transitionend',fn)
                })
                
            })
            
        })
    </script>
</html>

 

相關文章