用Javascript制作旋转导航菜单
2010-09-14 12:57:27 来源：WEB开发网你见过这样的导航菜单吗？导航菜单围绕着网站Logo不停地旋转，而一旦你把鼠标移到菜单上，旋转立即停止，在显示网站logo的地方显示出这个菜单链接的内容简介，点击链接将链接到指定的网页。一旦你的鼠标离开菜单，导航菜单又继续不停地旋转。你看这种导航菜单是不是既吸引人又贴近用户。本文例子如下图所示。是不是想在自已的网页上也放上一个，其实制作起来也不太难。
制作思路：要使页面的内容旋转起来，用图层和Javascript程序是肯定的了，要使图层的运动轨迹是一个圆，这要用到圆的参数方程，这是一个数学问题，不懂也没关系，程序我已写好，你只要复制就行了。关于鼠标指到某个链接就显示该链接的内容简介，这是图层的visible属性控制，用Dreamweaver的网友，用Behaviors很容易实现，不过在本文中我自编了一个小程序来控制图层的visible属性，以便不用Dreamweaver的网友也能很容易地做出本文的效果。
制作方法：
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[i] += inc;
objects[i].left = (r * Math.cos(pos[i])) + xoff
objects[i].top = (r * Math.sin(pos[i])) + 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[i] = 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>
Tags：Javascript 制作 旋转
编辑录入：爽爽 [复制链接] [打 印]
中查找“用Javascript制作旋转导航菜单”更多相关内容
中查找“用Javascript制作旋转导航菜单”更多相关内容更多精彩
赞助商链接
