![]()
如圖所示，菜單的子模塊沿着虛線順時針旋轉（虛線只是軌道示意用來理解的，實際的頁面上沒有虛線）；
當鼠標進入菜單時，停止旋轉，鼠標移除出，繼續旋轉；
請問這種旋轉菜單的如何實現？？
能有代碼最好！謝謝了！
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title> 頁面名稱 </title>
<style type="text/css">
#box {
position: relative;
width: 500px;
height: 500px;
background: #CCC;
}
#box div {
position: absolute;
border: 1px solid #000;
display: inline;
background: #FFF;
padding: 10px;
}
</style>
</head>
<body>
<div id="box">
<div>aaaaa</div>
<div>bb</div>
<div>ccccccc</div>
<div>ddd</div>
<div>eeeee</div>
</div>
<script type="text/javascript">
(function () {
var box = document.getElementById("box");
var div = box.getElementsByTagName("div");
var cx = box.offsetWidth >> 1;
var cy = box.offsetHeight >> 1;
var len = div.length;
var radius = 200;
var loop = 0;
function draw() {
loop += 0.02;
for (var i = 0; i < len; i++) {
div[i].style.left = (Math.sin((Math.PI*2)*(i/len)+loop)*radius) + cx - (div[i].offsetWidth>>1) + "px";
div[i].style.top = (-Math.cos((Math.PI*2)*(i/len)+loop)*radius) + cy - (div[i].offsetHeight>>1) + "px";
}
}
var timer = setInterval(draw, 50);
for (var i = 0; i < len; i++) {
div[i].onmouseover = function () {
clearInterval(timer);
}
div[i].onmouseout = function () {
timer = setInterval(draw, 50);
}
}
})();
</script>
</body>
</html>
