WEB开发网
开发学院网页设计JavaScript 用Javascript制作旋转导航菜单 阅读

用Javascript制作旋转导航菜单

 2010-09-14 12:57:27 来源:WEB开发网   
核心提示:你见过这样的导航菜单吗?导航菜单围绕着网站Logo不停地旋转,而一旦你把鼠标移到菜单上,用Javascript制作旋转导航菜单,旋转立即停止,在显示网站logo的地方显示出这个菜单链接的内容简介,var xoff = 280; //旋转中心X坐标var yoff = 170; //旋转中心Y坐标var pi = Mat

你见过这样的导航菜单吗?导航菜单围绕着网站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>

1 2  下一页

Tags:Javascript 制作 旋转

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接