旋转的导航菜单

加入如下代码到head区域
<style> .fly { color: 336c6c; font-family: arial; font-size: 24px; position: absolute; visibility: hidden; z-index: 2; } .logo { font-family: times; position: absolute; top: 0px; left: 70px; visibility: visible; z-index: 1; } .desc { text-align: center; font-family: 楷体_GB2312; font-size: 15px; color: #336c6c; position: absolute; top: 220px; left: 140px; width: 400px; visibility: hidden; z-index: 0; } BODY { background: #c0c0c0; } A { color: lime; } A:HOVER { color : yellow; } </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 slideLogo(from, to) { if (from < to) { company.top = (from += 10); setTimeout('slideLogo(' + from + ',' + to + ')', 20); } else initObjects(); } function rotateObjects() { for (var i = 0; i < pos.length; i++) { pos[i] += inc; objects[i].visibility = 'visible'; objects[i].left = (r * Math.cos(pos[i])) + xoff objects[i].top = (r * Math.sin(pos[i])) + yoff; } rotateTimer = setTimeout("rotateObjects()", 50); } function initObjects() { objects = new Array(fly1, fly2, fly3, fly4); pos = new Array(); pos[0] = 0; for (var i = 1; i < objects.length; i++) { pos[i] = parseFloat(pos[i - 1] + ((2 * pi) / objects.length)); } rotateObjects(); } /* Variables for rotating objects */ var objects; var pos; var r = 80; // radius var xoff = 140; // 左边距 var yoff = 170; // 上边距 var pi = Math.PI; // get pi var inc = pi / 280; // 旋转速度 var objects; // objects to be rotated var pos; // position for objects </script>

加入如下代码到body区域
<div ID="fly1" CLASS="fly"><p> <a HREF="#" onMouseOver="showObject(desc1)" onMouseOut="hideObject(desc1)">link 1</a><br> </p> </div><div ID="fly2" CLASS="fly"><p> <a HREF="#" onMouseOver="showObject(desc2)" onMouseOut="hideObject(desc2)">link 2</a><br> </p> </div><div ID="fly3" CLASS="fly"><p> <a HREF="#" onMouseOver="showObject(desc3)" onMouseOut="hideObject(desc3)">link 3</a><br> </p> </div><div ID="fly4" CLASS="fly"><p> <a HREF="#" onMouseOver="showObject(desc4)" onMouseOut="hideObject(desc4)">link 4</a><br> </p> </div><div ID="company" CLASS="logo"> <p>WELCOME TO Typhoon Start</p> </div><div ID="desc1" CLASS="desc"> <p>link 1的内容 </p> </div><div ID="desc2" CLASS="desc"> <p>link 2的内容 </p> </div><div ID="desc3" CLASS="desc"> <p>link 3的内容 </p> </div><div ID="desc4" CLASS="desc"> <p>link 4的内容 </p> </div><script LANGUAGE="JavaScript"> /* Simple version detection */ var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4); /* They can be used in place of hidden and visible because on occasion Navigator has problems with the two */ var HIDDEN = (isNS) ? 'hide' : 'hidden'; var VISIBLE = (isNS) ? 'show' : 'visible'; /* Create shortcut variables for different absolutely positioned elements */ var fly1 = (isNS) ? document.fly1 : document.all.fly1.style; var fly2 = (isNS) ? document.fly2 : document.all.fly2.style; var fly3 = (isNS) ? document.fly3 : document.all.fly3.style; var fly4 = (isNS) ? document.fly4 : document.all.fly4.style; var company = (isNS) ? document.company : document.all.company.style; var desc1 = (isNS) ? document.desc1 : document.all.desc1.style; var desc2 = (isNS) ? document.desc2 : document.all.desc2.style; var desc3 = (isNS) ? document.desc3 : document.all.desc3.style; var desc4 = (isNS) ? document.desc4 : document.all.desc4.style; /* Begin the sliding of the company logo */ slideLogo(0, 140); </script>