|
制作方法:
1、把下面这段程序插入到网页源代码的<head>与</head>之间:
<style> //这是一个CSS样式表,用于定义图层的外观属性
<!--
.rotatediv {position:absolute;z-index:2;}
.nrjj {text-align: center;position:absolute;top:160px;left: 230px;width:200px;height:30px;background-color:#ffffff; visibility:hidden; z-index:1;}
.logo {text-align: center;position:absolute;top:160px;left: 230px;width:200px;z-index:0;}
-->
</style>
<script language="JavaScript">//程序开始
<!--
ns4 = (document.layers)? true:false //检测浏览器。
ie4 = (document.all)? true:false
function showobject(obj) { //显示指定的图层。
if (ns4) obj.visibility = "show"
else if (ie4) obj.visibility = "visible"
}
function hideobject(obj) { //隐藏指定的图层。
if (ns4) obj.visibility = "hide"
else if (ie4) obj.visibility = "hidden"
}
function rotateobj(ctrl) { //使菜单图层旋转还是停止旋转的函数。
if (ctrl) { //如果“ctrl”为真,则开始计算图层的移动坐标,开始旋转。
for (var i = 0; i < pos.length; i++) {
pos += inc;
objects.left = (r * Math.cos(pos)) + xoff
objects.top = (r * Math.sin(pos)) + yoff;}
rotateTimer = setTimeout("rotateobj(true)", 50); //每50祚秒刷新一次。
}
else //如果“ctrl”不为真,则停止旋转。
clearTimeout(rotateTimer);
}
function initobj() { //初始化函数,为图层的旋转准备基本数据
objects = new Array(rotatediv1, rotatediv2, rotatediv3, rotatediv4); //菜单图层对象数组
pos = new Array(); //菜单图层位置数组,存放初始位置的圆心角(弧度)。
pos[0] = 0;
for (var i = 1; i < objects.length; i++) {
pos = parseFloat(pos[i - 1] + ((2 * pi) / objects.length));
}
rotateobj(true);
}
var objects;
var pos;
var r = 100; //旋转半径,可根据需要修改。
var xoff = 280; //旋转中心X坐标
var yoff = 170; //旋转中心Y坐标
var pi = Math.PI;
var inc = pi / 180; //旋转步长,把分母改小,则旋转加快。
-->
</script>
引用本程序时,注意以下几点:
1)可通过修改旋转半径来调整旋转范围的大小;
2)修改旋转中心的X、Y坐标,可以把旋转效果移到页面的任何地方。 |
|