javascript - 頁面上多個環形選單的實作？線上等，急！大神救我！

我需要在網頁上實現多個環形選單的實現，是隨機擺放的但是我現在給複製了兩個環形選單第二個選單的子選單出不來？請問我這個js該怎麼封裝呢，位置是用js計算好的？
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>圆形菜单</title>
    <script src="http://down.admin5.com/demo/code_pop/19/1309/js/jquery-1.11.0.js"></script>
</head>
<style>
    body, html {
        margin: 0;
        padding: 0;
    }
</style>
<body>
    <!-- 代码部分begin -->
    <!--
        圆形菜单[最多容纳8个最大正方形菜单块, 若需容纳更多的菜单块,则需要缩小菜单块的大小]
        半径 oR = 150px;
        圆心坐标(150,150)
    -->
    <p id="outerp" style="width:300px;height:300px;position: relative;">
        <!--
            圆心
            半径 iR = 50px;
            圆心坐标(150,150)
        -->
        <p id="innerp" style="background: blue;width: 100px;height: 100px;border-radius: 50px;position: absolute;left:100px;top:100px;"></p>


        <p class="remind" style="width:200px;height:100px;background:red;position:absolute;left:200px;top:200px;display:none;">

        </p>
        <!--
            ==========================
            最大菜单块(正方形)
            对角线长度 mDLen = oR - iR;
            边长 mWidth = mHeight = mDLen的平方 / 2 的结果 再开方 最后取整
            ==========================
            菜单块滑动圆
            半径 mR = iR + (mDLen / 2)
            ==========================
        -->
        <p class="m1" class="caidan" style="position: absolute; background: yellow;">1</p>
        <p class="m2" class="caidan" style="position: absolute; background: red;">2</p>
        <p class="m3" class="caidan" style="position: absolute; background: yellow;">3</p>
        <p class="m4" class="caidan" style="position: absolute; background: red;">4</p>
        <p class="m5" class="caidan" style="position: absolute; background: yellow;">5</p>
        <p class="m6" class="caidan" style="position: absolute; background: red;">6</p>
        <p class="m7" class="caidan" style="position: absolute; background: yellow;">7</p>
        <p class="m8" class="caidan" style="position: absolute; background: red;">8</p>
    </p>

    <!-- 第二个环形菜单开始 -->
    <p id="outerp" style="width:300px;height:300px;position: relative;">
        <!--
          圆心
          半径 iR = 50px;
          圆心坐标(150,150)
        -->
        <p id="innerp" style="background: blue;width: 100px;height: 100px;border-radius: 50px;position: absolute;left:100px;top:100px;"></p>


        <p class="remind" style="width:200px;height:100px;background:red;position:absolute;left:200px;top:200px;display:none;">

        </p>
        <!--
          ==========================
          最大菜单块(正方形)
          对角线长度 mDLen = oR - iR;
          边长 mWidth = mHeight = mDLen的平方 / 2 的结果 再开方 最后取整
          ==========================
          菜单块滑动圆
          半径 mR = iR + (mDLen / 2)
          ==========================
        -->
        <p class="m1" class="caidan" style="position: absolute; background: yellow;">1</p>
        <p class="m2" class="caidan" style="position: absolute; background: red;">2</p>
        <p class="m3" class="caidan" style="position: absolute; background: yellow;">3</p>
        <p class="m4" class="caidan" style="position: absolute; background: red;">4</p>
        <p class="m5" class="caidan" style="position: absolute; background: yellow;">5</p>
        <p class="m6" class="caidan" style="position: absolute; background: red;">6</p>
        <p class="m7" class="caidan" style="position: absolute; background: yellow;">7</p>
        <p class="m8" class="caidan" style="position: absolute; background: red;">8</p>
    </p>
    <script type="text/javascript">
        var or = 150;
        var ir = 50;
        var mWidth = 54;
        var mDLen = Math.sqrt(2 * Math.pow(mWidth, 2));
        //第1菜单块中心点与以o(150,150)为圆心的的X轴的夹角为-90(-PI/2), 求菜单块中心点坐标
        var m1X = parseInt((Math.cos(-1 * Math.PI / 2) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        var m1Y = parseInt((Math.sin(-1 * Math.PI / 2) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        $(".m1").width(mWidth);
        $(".m1").height(mWidth);
        $(".m1").offset({ top: m1Y, left: m1X });

        //第2菜单块中心点与以o(150,150)为圆心的的X轴的夹角为-45(-PI/4), 求菜单块中心点坐标
        var m2X = parseInt((Math.cos(-1 * Math.PI / 4) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        var m2Y = parseInt((Math.sin(-1 * Math.PI / 4) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        $(".m2").width(mWidth);
        $(".m2").height(mWidth);
        $(".m2").offset({ top: m2Y, left: m2X });

        //第3菜单块中心点与以o(150,150)为圆心的的X轴的夹角为0(0), 求菜单块中心点坐标
        var m3X = parseInt((Math.cos(0) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        var m3Y = parseInt((Math.sin(0) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        $(".m3").width(mWidth);
        $(".m3").height(mWidth);
        $(".m3").offset({ top: m3Y, left: m3X });

        //第4菜单块中心点与以o(150,150)为圆心的的X轴的夹角为45(PI/4), 求菜单块中心点坐标
        var m4X = parseInt((Math.cos(Math.PI / 4) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        var m4Y = parseInt((Math.sin(Math.PI / 4) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        $(".m4").width(mWidth);
        $(".m4").height(mWidth);
        $(".m4").offset({ top: m4Y, left: m4X });

        //第5菜单块中心点与以o(150,150)为圆心的的X轴的夹角为90(PI/2), 求菜单块中心点坐标
        var m5X = parseInt((Math.cos(Math.PI / 2) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        var m5Y = parseInt((Math.sin(Math.PI / 2) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        $(".m5").width(mWidth);
        $(".m5").height(mWidth);
        $(".m5").offset({ top: m5Y, left: m5X });

        //第6菜单块中心点与以o(150,150)为圆心的的X轴的夹角为135(0.75PI), 求菜单块中心点坐标
        var m6X = parseInt((Math.cos(0.75 * Math.PI) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        var m6Y = parseInt((Math.sin(0.75 * Math.PI) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        $(".m6").width(mWidth);
        $(".m6").height(mWidth);
        $(".m6").offset({ top: m6Y, left: m6X });

        //第7菜单块中心点与以o(150,150)为圆心的的X轴的夹角为180(PI), 求菜单块中心点坐标
        var m7X = parseInt((Math.cos(Math.PI) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        var m7Y = parseInt((Math.sin(Math.PI) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        $(".m7").width(mWidth);
        $(".m7").height(mWidth);
        $(".m7").offset({ top: m7Y, left: m7X });

        //第8菜单块中心点与以o(150,150)为圆心的的X轴的夹角为-135(PI), 求菜单块中心点坐标
        var m8X = parseInt((Math.cos(-0.75 * Math.PI) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        var m8Y = parseInt((Math.sin(-0.75 * Math.PI) * (ir + ((or - ir - mDLen) / 2) + mDLen / 2)) + 150 - mWidth / 2);
        $(".m8").width(mWidth);
        $(".m8").height(mWidth);
        $(".m8").offset({ top: m8Y, left: m8X });
        //点击事件
        $("#innerp").mouseover(function () {
            $(".remind").css("display", "block")
            $("#innerp").mouseout(function () {
                $(".remind").css("display", "none")
            });
            $(this).click(function () {
                $(".caidan").fadeToggle(1000);
            })
        });
    </script>
    <!-- 代码部分end -->
</body>
</html>
女神的闺蜜爱上我2723 天前861
javascript - 頁面上多個環形選單的實作？線上等，急！大神救我！

全部回覆(2)我來回復
