一个人免费观看在线视频www,欧美高清性xxxxhdvideosex

I need to implement multiple ring menus on the web page, which are placed randomly. But now I have copied two ring menus, but the submenu of the second menu cannot be displayed? Please tell me how to encapsulate this js. Is the position calculated using 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 的結(jié)果 再開方 最后取整
            ==========================
            菜單塊滑動圓
            半徑 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>

    <!-- 第二個環(huán)形菜單開始 -->
    <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 的結(jié)果 再開方 最后取整
          ==========================
          菜單塊滑動圓
          半徑 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>
亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱
