js实现扇形旋转导航制作_circular.navigation.js制作扇形导航栏

今天用纯js给大家实现一个在网站上也比较常见的扇形旋转导航效果，上图：

当我们点击右下角的那个按钮时，左边的图标旋转“飞出”；
HTML代码：

<div id="menu">
    <!-- 飞出图标 -->
    <div id="list">
        <img src="img/clos.png">
        <img src="img/full.png">
        <img src="img/open.png">
        <img src="img/prev.png">
        <img src="img/refresh.png">
        </div>
    <!-- 主图标 -->
    <div id="home"></div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12

CSS代码：

*{ margin: 0; padding: 0; }
#menu{
    width: 50px; height: 50px;
    position: fixed;
    right: 20px; bottom: 20px;
}
#list{
    height: 42px; width: 42px;
    position: relative;
    margin: 4px;
}
#list img{
    position: absolute;
    border-radius: 50%;
    left: 0; top: 0;
    transition: 0.5s all ease;
}
#home{
    width: 50px; height: 50px;
    background: url(img/home.png) no-repeat; 
    border-radius: 25px; 
    position: absolute; 
    left: 0; top: 0; 
    transition: 1s;
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

JS代码：

window.onload=function(){

    var hom=document.getElementById("home");
    var imgs=document.getElementById("list").getElementsByTagName("img");

    var onOff=true;
    //设置旋转半径
    var r=150;

    //点击图标图标先变大"消失"再"重现"
    for( var i=0;i<imgs.length;i++ ){       
        imgs[i].onclick=function(){     
            this.style.transition="0.3s"
            this.style.WebkitTransform=" scale(2) ";
            this.style.opacity="0";     
            addEnd( this,end);      
        };
    }

    function end(){
            this.style.transition="0.3s";
            this.style.WebkitTransform=" scale(1) ";
            this.style.opacity=1;
            removeEnd( this,end );                  
    }

    hom.onclick=function(){
        //点击主按钮逆时针旋转，图标"飞出"
        if( onOff ){
            this.style.WebkitTransform="rotate(-720deg)";
            for( var i=0;i<imgs.length;i++ ){
                var olt=toLT(r,90/4*i);
                imgs[i].style.transition=0.3+i*0.1+"s";
                imgs[i].style.left=-olt.l+"px";
                imgs[i].style.top=-olt.t+"px";
                imgs[i].style.WebkitTransform="rotate(-720deg)";
        }
        }else{
            //再次点击主按钮顺时针旋转，图标"收回"
            this.style.WebkitTransform="rotate(720deg)";
            for( var i=0;i<imgs.length;i++ ){   
                imgs[i].style.transition=0.3+(imgs.length-1-i)*0.1+"s";
                imgs[i].style.left=0+"px";
                imgs[i].style.top=0+"px";
                imgs[i].style.WebkitTransform="rotate(0deg)";
            }
        }
        onOff=!onOff;   
    }   

    function addEnd( obj,fn ){
        //transitionend在 CSS 完成过渡后触发事件.
        obj.addEventListener( 'WebkitTransitionEnd',fn,false );
        obj.addEventListener( 'transitionend',fn,false );
    }

    function removeEnd( obj,fn ){
        obj.removeEventListener( 'WebkitTranstionEnd',fn,false );
        obj.removeEventListener( 'transitonend',fn,false ); 
    }

    function toLT( iR,iDeg ){
        return { l:Math.round(Math.sin(iDeg/180*Math.PI)*iR),t:Math.round(Math.cos(iDeg/180*Math.PI)*iR)}
    }
} 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65