旋转菜单的制作 html 求大神指点

lyy249020983 2015-12-21 03:26:50

如图所示，菜单的子模块沿着虚线顺时针旋转（虚线只是轨道示意用来理解的，实际的页面上没有虚线）；

当鼠标进入菜单时，停止旋转，鼠标移除出，继续旋转；

请问这种旋转菜单的如何实现？？
能有代码最好！谢谢了！

...全文

141 5 打赏收藏转发到动态举报

写回复

用AI写文章

5 条回复

切换为时间正序

请发表友善的回复…

发表回复

nobSlience 2015-12-22

打赏
举报

引用 2 楼 jslang 的回复:

二楼关注你了，讲得很好，理解了。感谢

zpjshiwo77 2015-12-22

打赏
举报

引用 3 楼 lyy249020983 的回复:

[quote=引用 2 楼 jslang 的回复:]


<!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>

这段代码没有反应啊。。[/quote] 实测，有反应，而且很完美。

lyy249020983 2015-12-22

打赏
举报

引用 2 楼 jslang 的回复:


<!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>

这段代码没有反应啊。。

天际的海浪 2015-12-21

打赏
举报


<!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>