简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
javascript - Implémentation de plusieurs menus en anneau sur la page? En attente en ligne, urgent ! Dieu sauve-moi!
女神的闺蜜爱上我
女神的闺蜜爱上我 2017-06-12 09:31:45
0
2
843

Je dois implémenter plusieurs menus en anneau sur la page Web, qui sont placés de manière aléatoire. Mais maintenant, j'ai copié deux menus en anneau. Le sous-menu du deuxième menu ne peut pas être affiché ? S'il vous plaît dites-moi comment encapsuler ce js. La position est-elle calculée à l'aide de 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>
女神的闺蜜爱上我
女神的闺蜜爱上我

répondre à tous(2)
扔个三星炸死你
扔个三星炸死你2017-06-12 09:33:45 2 plancher

Je viens de voir ça, vas-y doucement http://www.cnblogs.com/lhb25/...

Comme +0
Ajouter une réponse
三叔
三叔2017-06-12 09:33:45 1 plancher

id="innerp"

L'ID ne peut pas apparaître à plusieurs reprises dans le document. . . .

Comme +0
Ajouter une réponse
Sujets populaires
Plus>
Articles populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！