javascript - 页面上多个环形菜单的实现？在线等，急！大神救我！
本文介绍了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)
-->
<div id="outerDiv" style="width:300px;height:300px;position: relative;">
<!--
圆心
半径 iR = 50px;
圆心坐标(150,150)
-->
<div id="innerDiv" style="background: blue;width: 100px;height: 100px;border-radius: 50px;position: absolute;left:100px;top:100px;"></div>
<div class="remind" style="width:200px;height:100px;background:red;position:absolute;left:200px;top:200px;display:none;">
</div>
<!--
==========================
最大菜单块(正方形)
对角线长度 mDLen = oR - iR;
边长 mWidth = mHeight = mDLen的平方 / 2 的结果 再开方 最后取整
==========================
菜单块滑动圆
半径 mR = iR + (mDLen / 2)
==========================
-->
<div class="m1" class="caidan" style="position: absolute; background: yellow;">1</div>
<div class="m2" class="caidan" style="position: absolute; background: red;">2</div>
<div class="m3" class="caidan" style="position: absolute; background: yellow;">3</div>
<div class="m4" class="caidan" style="position: absolute; background: red;">4</div>
<div class="m5" class="caidan" style="position: absolute; background: yellow;">5</div>
<div class="m6" class="caidan" style="position: absolute; background: red;">6</div>
<div class="m7" class="caidan" style="position: absolute; background: yellow;">7</div>
<div class="m8" class="caidan" style="position: absolute; background: red;">8</div>
</div>
<!-- 第二个环形菜单开始 -->
<div id="outerDiv" style="width:300px;height:300px;position: relative;">
<!--
圆心
半径 iR = 50px;
圆心坐标(150,150)
-->
<div id="innerDiv" style="background: blue;width: 100px;height: 100px;border-radius: 50px;position: absolute;left:100px;top:100px;"></div>
<div class="remind" style="width:200px;height:100px;background:red;position:absolute;left:200px;top:200px;display:none;">
</div>
<!--
==========================
最大菜单块(正方形)
对角线长度 mDLen = oR - iR;
边长 mWidth = mHeight = mDLen的平方 / 2 的结果 再开方 最后取整
==========================
菜单块滑动圆
半径 mR = iR + (mDLen / 2)
==========================
-->
<div class="m1" class="caidan" style="position: absolute; background: yellow;">1</div>
<div class="m2" class="caidan" style="position: absolute; background: red;">2</div>
<div class="m3" class="caidan" style="position: absolute; background: yellow;">3</div>
<div class="m4" class="caidan" style="position: absolute; background: red;">4</div>
<div class="m5" class="caidan" style="position: absolute; background: yellow;">5</div>
<div class="m6" class="caidan" style="position: absolute; background: red;">6</div>
<div class="m7" class="caidan" style="position: absolute; background: yellow;">7</div>
<div class="m8" class="caidan" style="position: absolute; background: red;">8</div>
</div>
<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 });
//点击事件
$("#innerDiv").mouseover(function () {
$(".remind").css("display", "block")
$("#innerDiv").mouseout(function () {
$(".remind").css("display", "none")
});
$(this).click(function () {
$(".caidan").fadeToggle(1000);
})
});
</script>
<!-- 代码部分end -->
</body>
</html>解决方案
刚刚看到这个 安利一下 http://www.cnblogs.com/lhb25/...
这篇关于javascript - 页面上多个环形菜单的实现？在线等，急！大神救我！的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
