扇形导航

最新推荐文章于 2021-06-10 00:18:10 发布

weixin_44552543

最新推荐文章于 2021-06-10 00:18:10 发布

阅读量119

点赞数

本文链接：https://blog.csdn.net/weixin_44552543/article/details/91901949

版权

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="wrap">
    <div class="inner">
        <img src="clos.png">
        <img src="full.png">
        <img src="open.png">
        <img src="prev.png">
        <img src="refresh.png">
    </div>
    <div class="home"></div>
</div>
</body>
<style>
    *{
        padding: 0;
        margin: 0;
    }
    html,body{
        height: 100%;
        overflow: hidden;
    }
    #wrap{
        width: 50px;
        height: 50px;
        position:fixed;
        /*background: deeppink;*/
        bottom: 15px;
        right: 15px;
    }
    #wrap >.inner{
        height: 100%;
    }
    #wrap >.inner >img{
        position: absolute;
        left: 0;
        top: 0;
        margin: 4px;
        border-radius: 50%;


    }
    #wrap>.home{
        /*z-index: 1;*/
        left: 0;
        top: 0;
        position: absolute;
        width: 100%;
        height: 100%;
        background:url("home.png") no-repeat;
        border-radius: 50%;
        transition: 2s;
    }

</style>
<script>
    window.onload=function () {
        var home=document.querySelector(".home");
        var imgs=document.querySelectorAll("#wrap >.inner >img");
        var flag=true;
         var c=140;
        home.onclick=function () {
            if (flag){
                this.style.transform="rotate(-720deg)";
                for (var i=0;i<imgs.length;i++){
                    imgs[i].style.transition="1s "+(i*0.1)+"s";
                    imgs[i].style.transform="rotate(-720deg)";

                    imgs[i].style.left=-getPoint(c,90*i/(imgs.length-1)).left+"px";
                    imgs[i].style.top=-getPoint(c,90*i/(imgs.length-1)).top+"px";
                }

            } else {
                this.style.transform="rotate(0deg)";
                for (var i=0;i<imgs.length;i++){
                    imgs[i].style.transition="1s "+(i*0.1)+"s";
                    imgs[i].style.transform="rotate(0deg)";
                    imgs[i].style.left=0+"px";
                    imgs[i].style.top=0+"px";
                }

            }
            flag=!flag;
        };
        function getPoint(c,deg) {
            var x=Math.round(c*Math.sin(deg*Math.PI/180));
            var y=Math.round(c*Math.cos(deg*Math.PI/180));
            return {left:x,top:y};
        }

    }

</script>
</html>

在这里插入图片描述

weixin_44552543

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
扇形导航

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><div id="wrap"> <div class="inne...
复制链接

扫一扫