javascript - Implementierung mehrerer Ringmenüs auf einer Seite? Warte online, dringend! Gott rette mich!
Ich muss mehrere Ringmenüs auf der Webseite implementieren, die jedoch zufällig platziert werden. Das Untermenü des zweiten Menüs kann nicht angezeigt werden. Bitte sagen Sie mir, wie ich dieses js kapseln soll. Wird die Position mit js berechnet?
<!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>
