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

用Javascript制作旋转导航菜单

 2010-09-14 12:57:27 来源:WEB开发网   
核心提示: 引用本程序时,注意以下几点:1)可通过修改旋转半径来调整旋转范围的大小;2)修改旋转中心的X、Y坐标,用Javascript制作旋转导航菜单(2),可以把旋转效果移到页面的任何地方, 2、在网页源代码的<body>与</body>之间插入下面的代码以制作导航菜单等图

引用本程序时,注意以下几点:

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的图层面板操作就方便多了。

上一页  1 2 

Tags:Javascript 制作 旋转

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