📄 ch11-148.txt
字号:
<HTML>
<HEAD>
<TITLE>菜单导航篇--旋转菜单</TITLE>
</HEAD>
<BODY bgcolor="#fef4d2" >
<br><br>
<center>
<font color="ffaafa"><h2>菜单导航篇--旋转菜单</h2></font>
<hr width=300>
<br><br>
<!-- 案例代码开始 -->
<script language=JavaScript>
var objects;
var pos;
var r = 110;
<!-- [Step1]: 这里可以更改旋转菜单的中心坐标 -->
var xoff = 350;
var yoff = 240;
var pi = Math.PI;
var inc = pi / 180;
function showObject(object) {
object.visibility = VISIBLE;
}
function hideObject(object) {
object.visibility = HIDDEN;
}
function slidepicture(from, to) {
if (from < to) {
website.top = (from += 10);
setTimeout('slidepicture(' + from + ',' + to + ')', 75); }
else initObjects();
}
function initObjects() {
objects = new Array(circle1, circle2, circle3, circle4, circle5, circle6);
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();
}
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()", 75);
}
</script>
<!-- [Step2]: 在此能够按序增加菜单的名称 -->
<div id="circle1" class="circle">
<a href="" onmouseover="showObject(text1)" onmouseout="hideObject(text1)">旋转菜单1</a><br>
</div>
<div id="circle2" class="circle">
<a href="" onmouseover="showObject(text2)" onmouseout="hideObject(text2)">旋转菜单2</a><br>
</div>
<div id="circle3" class="circle">
<a href="" onmouseover="showObject(text3)" onmouseout="hideObject(text3)">旋转菜单3</a><br>
</div>
<div id="circle4" class="circle">
<a href="" onmouseover="showObject(text4)" onmouseout="hideObject(text4)">旋转菜单4</a><br>
</div>
<div id="circle5" class="circle">
<a href="" onmouseover="showObject(text5)" onmouseout="hideObject(text5)">旋转菜单5</a><br>
</div>
<div id="circle6" class="circle">
<a href="" onmouseover="showObject(text6)" onmouseout="hideObject(text6)">旋转菜单6</a><br>
</div>
<div id="text1" class="text">
<p align="center"><b>旋转子菜单</b><br>
子菜单1。<br>子菜单2。<br>子菜单3。<br>子菜单4。<br>子菜单5。<br>
</div>
<div id="text2" class="text">
<p align="center"><b>旋转子菜单</b><br>
子菜单1。<br>子菜单2。<br>子菜单3。<br>子菜单4。<br>子菜单5。<br>
</div>
<div id="text3" class="text">
<p align="center"><b>旋转子菜单</b><br>
子菜单1。<br>子菜单2。<br>子菜单3。<br>子菜单4。<br>子菜单5。<br>
</div>
<div id="text4" class="text">
<p align="center"><b>旋转子菜单</b><br>
子菜单1。<br>子菜单2。<br>子菜单3。<br>子菜单4。<br>子菜单5。<br>
</div>
<div id="text5" class="text">
<p align="center"><b>旋转子菜单</b><br>
子菜单1。<br>子菜单2。<br>子菜单3。<br>子菜单4。<br>子菜单5。<br>
</div>
<div id="text6" class="text">
<p align="center"><b>旋转子菜单</b><br>
子菜单1。<br>子菜单2。<br>子菜单3。<br>子菜单4。<br>子菜单5。<br>
</div>
<script language=JavaScript>
var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);
var HIDDEN = (isNS) ? 'hide' : 'hidden';
var VISIBLE = (isNS) ? 'show' : 'visible';
var circle1 = (isNS) ? document.circle1 : document.all.circle1.style;
var circle2 = (isNS) ? document.circle2 : document.all.circle2.style;
var circle3 = (isNS) ? document.circle3 : document.all.circle3.style;
var circle4 = (isNS) ? document.circle4 : document.all.circle4.style;
var circle5 = (isNS) ? document.circle5 : document.all.circle5.style;
var circle6 = (isNS) ? document.circle6 : document.all.circle6.style;
var text1 = (isNS) ? document.text1 : document.all.text1.style;
var text2 = (isNS) ? document.text2 : document.all.text2.style;
var text3 = (isNS) ? document.text3 : document.all.text3.style;
var text4 = (isNS) ? document.text4 : document.all.text4.style;
var text5 = (isNS) ? document.text5 : document.all.text5.style;
var text6 = (isNS) ? document.text6 : document.all.text6.style;
slidepicture(0, 0);
</script>
<style>
.circle { font-family: Verdana, Helvetica; font-size: 12px; color: #000000; position:absolute; visibility: hidden; z-index: 2 }
.text{ text-align: left; font-family: Verdana, Helvetica; font-size: 12px; color:#000000; position: absolute; top: 185px; left: 280px; width:225px; visibility: hidden; z-index: 0 }
.picture { font-family: Verdana, Helvetica; font-size: 12px; color: #000000; position: absolute; top: 10px; left: 10px; visibility: visible; z-index: 1 }
</style>
<!-- 案例代码结束 -->
</BODY>
</HTML>
⌨️ 快捷键说明
复制代码
Ctrl + C
搜索代码
Ctrl + F
全屏模式
F11
切换主题
Ctrl + Shift + D
显示快捷键
?
增大字号
Ctrl + =
减小字号
Ctrl + -