自定义扇形菜单

公告

View Post

1、材料图

2、代码实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扇形菜单</title>
    <style>
        html,body {
            height: 100%;
            overflow: hidden;
        }
        div {
            width: 126px;
            height: 126px;
            border-radius: 50%;
            background: url("./test.jpg");
            position: absolute;
            bottom: 0;
            right: 0;
        }
        .main {
            background-position: 0px -126px;
            z-index: 2;
            transition: 2s;
        }
        .img1 {
            background-position: -126px -126px;
        }
        .img2 {
            background-position: -252px -126px;
        }
        .img3 {
            background-position: -381px -126px;
        }
        .img4 {
            background-position: -510px -126px;
        }
    </style>
</head>
<body>
    <div class="main"></div>
    <div class="other img1"></div>
    <div class="other img2"></div>
    <div class="other img3"></div>
    <div class="other img4"></div>
</body>
<script>
    var main = document.getElementsByClassName("main")[0]
    var imgs = document.getElementsByClassName("other")
    var flag = false
    // 关闭的时候需要打开菜单
    main.onclick = function () {
        if (!flag) {
            main.style.transform = "rotate(720deg)";
            flag = true
            for (let i=0;i<imgs.length;i++) {
                imgs[i].style.transition="1s"
                imgs[i].style.transitionDelay = i*0.1 + "s"
                imgs[i].style.right = getPosition(i).left + "px"
                imgs[i].style.bottom = getPosition(i).top + "px"
            }
        } else {
            main.style.transform = "rotate(0deg)"
            for (var i=0;i<imgs.length;i++) {
                imgs[i].style.transitionDelay = (imgs.length-i-1)*0.1 + "s"
                imgs[i].style.right = 0 + "px"
                imgs[i].style.bottom = 0 + "px"
            }
            flag = false
        }
    }

    function getPosition(i) {
        var v = 300
        var left = Math.sin(i * 30 * Math.PI/180) * v
        var top = Math.cos(i * 30 * Math.PI/180) * v
        return {
            left:left,
            top:top
        }
    }
</script>
</html>
posted on 2021-11-04 15:50 黄文超阅读(112) 评论(0) 收藏举报
刷新页面返回顶部