js实现扇形旋转导航制作

青旅半醒 2022-06-15 19:57 354阅读 0赞

今天用纯js给大家实现一个在网站上也比较常见的扇形旋转导航效果，上图：  
![这里写图片描述][SouthEast]  
当我们点击右下角的那个按钮时，左边的图标旋转“飞出”；  
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)}
        }
    }

[SouthEast]: /images/20220616/d821b8c060cd4c40ae53752b180932c0.png

发表评论取消回复

表情：

评论列表（有 0 条评论，354人围观）

还没有评论，来说两句吧...

相关阅读

相关 JS导航栏功能实现

慕课网JS课程结课例子效果： ![2019082122043998.gif][] <!DOCTYPE HTML> <html>

向右看齐/ 2024年04月11日 13:22/ 0 赞/ 51 阅读

相关 js实现旋转木马相册

鼠标拖拽效果图如下： ![在这里插入图片描述][20200402084625113.gif] 旋转效果图如下： ![在这里插入图片描述][20200402084046

太过爱你忘了你带给我的痛/ 2023年07月20日 13:45/ 0 赞/ 53 阅读

相关 189. 旋转数组（JS实现）

1 题目 > 给定一个数组，将数组中的元素向右移动 k 个位置，其中 k 是非负数。 > 示例 1: > 输入: \[1,2,3,4,5,6,7\] 和 k =

╰半夏微凉°/ 2022年11月25日 11:41/ 0 赞/ 94 阅读

相关网页导航菜单制作

![Image 1][] 导航部分可分为三部分：第一部分：登陆/注册 ![Image 1][] 第二部分：导航，无序列表部分 ![Image 1][]

谁借莪１个温暖的怀抱￠/ 2022年09月30日 09:42/ 0 赞/ 210 阅读

相关 WinCC 扇形旋转制作

最近的项目在做PLC的工控开发，用于控制楼宇的制冷系统。设计院的施工流程图纸正式下来后，开始了我学习使用西门子PLC的路程，本篇先简单介绍一个使用WinCC开发HMI的简单风扇

╰半夏微凉°/ 2022年08月12日 01:00/ 0 赞/ 580 阅读

相关 js实现导航菜单效果

<script type="text/javascript"> $(document).ready(function(){ var temp;

淩亂°似流年/ 2022年08月07日 06:00/ 0 赞/ 179 阅读

相关 js实现扇形旋转导航制作

今天用纯js给大家实现一个在网站上也比较常见的扇形旋转导航效果，上图： ![这里写图片描述][SouthEast] 当我们点击右下角的那个按钮时，左边的图标旋转“飞出”

青旅半醒/ 2022年06月15日 19:57/ 0 赞/ 355 阅读

相关 css制作抽奖轮盘效果/扇形菜单

先上效果图 ![Center][] 附上代码： <!DOCTYPE html> <html> <head> <meta charset

拼搏现实的明天。/ 2022年06月14日 12:21/ 0 赞/ 148 阅读

相关导航条的制作

要点： 1、用无序列表构建菜单；ul/li 2、垂直菜单转变为水平菜单：float:left； 3、在制作圆角菜单时，背景图片贴在<a>标签上

川长思鸟来/ 2022年06月14日 06:24/ 0 赞/ 187 阅读

相关导航栏的制作

1.最简单的方法，不是循环出来的 <ul class="clearfix"> <li class="active"><a href="{:url('i

古城微笑少年丶/ 2022年05月10日 05:26/ 0 赞/ 243 阅读