首頁 > 開發者 > JavaScript
你見過這樣的導覽功能表嗎？導覽功能表圍繞著網站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座標，可以把旋轉效果移到頁面的任何地方。
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
