我的学习笔记004--javascript实现旋转导航菜单
使用的方法
1，js dom css
2，Math函数
示例代码
<!<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>旋转导航菜单</title>
<style type="text/css">
.circle
{
position: absolute;
z-index: 2;
visibility: hidden;
width: 349px;
height: 262px;
}
img
{
border-style: none;
}
</style>
</head>
<body>
<div id="circle1" class="circle">
<a href="#">
<img src="Images/01.JPG" alt="" /></a></div>
<div id="circle2" class="circle">
<a href="#">
<img src="Images/02.JPG" alt="" /></a></div>
<div id="circle3" class="circle">
<a href="#">
<img src="Images/03.JPG" alt="" /></a></div>
<div id="circle4" class="circle">
<a href="#">
<img src="Images/04.JPG" alt="" /></a></div>
<div id="circle5" class="circle">
<a href="#">
<img src="Images/05.JPG" alt="" /></a></div>
<div id="circle6" class="circle">
<a href="#">
<img src="Images/06.JPG" alt="" /></a></div>
<script type="text/javascript" language="javascript">
var divall;
var r = 300; 旋转半径
var circleX = 500; //旋转中心点坐标
var circleY = 300;
var pos;
var pai = window.Math.PI;
var pianyi = pai / 150; //偏转角
function start() {
divall = new Array(document.all.circle1.style, document.all.circle2.style, document.all.circle3.style, document.all.circle4.style, document.all.circle5.style, document.all.circle6.style);
pos = new Array();
pos[0] = 0;
for (var i = 1; i < divall.length; i++) {
pos[i] = parseFloat(pos[i - 1] + (2 * pai / divall.length));
}
circle();
}
function circle() {
for (var i = 0; i < pos.length; i++) {
pos[i] = pos[i] + pianyi;
divall[i].visibility = "visible"
divall[i].left = r * Math.cos(pos[i]) + circleX;
divall[i].top = r * Math.sin(pos[i]) + circleY;
}
window.setTimeout("circle()", 100);
}
start();
</script>
</body>
</html>
