js三角函数做360导航条

最新推荐文章于 2023-05-29 09:51:36 发布

石界星空

最新推荐文章于 2023-05-29 09:51:36 发布

阅读量620

点赞数

分类专栏： js 文章标签： javascript

本文链接：https://blog.csdn.net/stone10086/article/details/72779574

版权

js 专栏收录该内容

69 篇文章 1 订阅

订阅专栏

效果图：

这里写图片描述

点击可旋转按先后顺序收放

代码：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <style type="text/css">
            *{
                padding: 0;
                margin: 0;
            }
            #box{
                width: 50px;
                height: 50px;
                position: fixed;
                bottom: 50px;
                right: 50px;
                border-radius: 50%;
            }
            #box img{
                width: 42px;
                height: 42px;
                display: block;
                position: absolute;
                top: 4px;
                left: 4px;
                /*transition: all 1s linear;*/
                border-radius: 50%;
            }
            #home{
                width: 49px;
                height: 49px;
                border-radius: 50%;
                background: url(img/home.png) no-repeat center;
                background-size: cover;
                position: absolute;
                top: 0.5px;
                left: 0.5px;
                transition: all 1s linear;
            }
        </style>
    </head>
    <body>
        <div id="box">
            <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 id="home">

            </div>

        </div>
    </body>
    <script type="text/javascript">
        var oHome=document.querySelector('#home');
        var off=true;
        var aImg=document.querySelectorAll('img');
        var r=-150;
        oHome.onclick=function(){
            if (off) {
                this.style.transform='rotate(-360deg)';
                for (var i=0;i<aImg.length;i++) {
                    var getlt=getLT(r,22.5*i);
                    aImg[i].style.transition='all 1s linear';
                    aImg[i].style.transitionDelay=i*0.1+'s';

                    aImg[i].style.top=getlt.t+'px';
                    aImg[i].style.left=getlt.l+'px';
                    aImg[i].style.transform='rotate(1440deg)';
                }
            }else{
                this.style.transform='rotate(360deg)';
                for (var i=0;i<aImg.length;i++) {

                    aImg[i].style.transition='all 1s linear';
                    aImg[i].style.transitionDelay=0.5-i*0.1+'s';

                    aImg[i].style.top='4px';
                    aImg[i].style.left='4px';
                    aImg[i].style.transform='rotate(-1440deg)';
                }
            }
            off=!off;
        }

        function getLT(r,deg){
            return {
            l:r*Math.sin(deg/180*Math.PI),
            t:r*Math.cos(deg/180*Math.PI)}
        }
    </script>


</html>