js实现扇形旋转导航制作

最新推荐文章于 2024-02-02 10:51:36 发布

NINE-NINE

最新推荐文章于 2024-02-02 10:51:36 发布

阅读量3.2k

点赞数 1

分类专栏： javascript HTML 前端小实例文章标签：导航 html javascript

本文链接：https://blog.csdn.net/m0_38099607/article/details/72082278

版权

HTML 同时被 3 个专栏收录

24 篇文章 2 订阅

订阅专栏

前端小实例

18 篇文章 4 订阅

订阅专栏

javascript

17 篇文章 1 订阅

订阅专栏

今天用纯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>

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;
}

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)}
    }
}