你见过这样的导航菜单吗？导航菜单围绕着网站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）修改旋转中心的X、Y坐标，可以把旋转效果移到页面的任何地方。
2、在网页源代码的<body>与</body>之间插入下面的代码以制作导航菜单等图层：
<div ID="rotatediv1" CLASS="rotatediv" onMouseOver="showobject(nrjj1); rotateobj(false)" onMouseOut="hideobject(nrjj1);rotateobj(true)"> <p><a href="http://cms.ddvip.com/index.php#" ><img src="image/dot.gif" width="11" height="8">链接 1</a><br></p></div>
<div ID="rotatediv2" CLASS="rotatediv" onMouseOver="showobject(nrjj2); rotateobj(false)" onMouseOut="hideobject(nrjj2); rotateobj(true)"><p><img src="image/dot.gif" width="11" height="8"><a href="http://cms.ddvip.com/index.php#" >链接 2</a><br></p>
</div>
<div ID="rotatediv3" CLASS="rotatediv" onMouseOver="showobject(nrjj3); rotateobj(false)" onMouseOut="hideobject(nrjj3); rotateobj(true)"><p><a href="http://cms.ddvip.com/index.php#"><img src="image/dot.gif" width="11" height="8">链接 3</a><br></p>
</div>
<div ID="rotatediv4" CLASS="rotatediv" onMouseOver="showobject(nrjj4); rotateobj(false)" onMouseOut="hideobject(nrjj4); rotateobj(true)"><p><img src="image/dot.gif" width="11" height="8"><a href="http://cms.ddvip.com/index.php#" >链接 4</a><br></p>
</div>
<div ID="nrjj0" CLASS="logo"><p>黄山村夫站<br>http://fym888.go.163.com</p></div>
<div ID="nrjj1" CLASS="nrjj"><p><img src="image/a6ball.gif" width="18" height="18">链接1内容简介 </p></div>
<div ID="nrjj2" CLASS="nrjj"><p>链接2内容简介 </p></div>
<div ID="nrjj3" CLASS="nrjj"><p>链接3内容简介 </p></div>
<div ID="nrjj4" CLASS="nrjj"><p>链接4内容简介</p></div>
<script LANGUAGE="JavaScript">
/* 下面是准备一些变量的初值，为事件调用程序作基础*/
var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);
var rotatediv1 = (isNS) ? document.rotatediv1 : document.all.rotatediv1.style;
var rotatediv2 = (isNS) ? document.rotatediv2 : document.all.rotatediv2.style;
var rotatediv3 = (isNS) ? document.rotatediv3 : document.all.rotatediv3.style;
var rotatediv4 = (isNS) ? document.rotatediv4 : document.all.rotatediv4.style;
var nrjj1 = (isNS) ? document.nrjj1 : document.all.nrjj1.style;
var nrjj2 = (isNS) ? document.nrjj2 : document.all.nrjj2.style;
var nrjj3 = (isNS) ? document.nrjj3 : document.all.nrjj3.style;
var nrjj4 = (isNS) ? document.nrjj4 : document.all.nrjj4.style;
initobj();
</script>
上面的代码看起来有点复杂，你若对HTML不熟悉的话，可以不要管它，只要把其中的文本、图片和超级链接换成你所需要的就行了。
至此，制作结束，一个美观实用的旋转导航菜单就做好了。在实际制作过程中，由菜单内容简介的图层是设置成隐藏的，若是用DW或FP的网友可能无法编辑，解决的办法是：
1）在源代码中编辑；
2）把CSS样式表中的这段代码visibility:hidden;删除，这样那些图层就可看见了，但是，是重叠在一起的，可用鼠标把它们拖开，把内容写好后，再把它们拖回原处。使用DW的网友可用DW的图层面板操作就方便多了。
|
百度搜藏
