用Javascript制作旋转导航菜单
2010-09-14 12:57:27 来源：WEB开发网引用本程序时，注意以下几点：
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=http://tech.ddvip.com/2006-04/"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=http://tech.ddvip.com/2006-04/"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=http://tech.ddvip.com/2006-04/"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=http://tech.ddvip.com/2006-04/"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=http://tech.ddvip.com/2006-04/"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的图层面板操作就方便多了。
Tags：Javascript 制作 旋转
编辑录入：爽爽 [复制链接] [打 印]
中查找“用Javascript制作旋转导航菜单”更多相关内容
中查找“用Javascript制作旋转导航菜单”更多相关内容更多精彩
赞助商链接
