Making a rotating navigation menu with JavaScript

Have you ever seen a navigation menu like this? The navigation menu revolves around the website logo, and once you move the mouse over the menu, the rotation stops immediately, showing the site logo where the content of the menu link is displayed, and clicking on the link will link to the specified page. Once your mouse leaves the menu, the navigation menu continues to rotate. You see this navigation menu is not only attractive but also close to the user. The example below is shown in the following illustration. Do not want to be on the Web page also put on a, in fact, the production is not too difficult.

Making a thought: to make the content of the page rotate, with the layer and JavaScript program is certain, to make the trajectory of the layer is a circle, this is to use the parameters of the equation, this is a mathematical problem, do not understand it does not matter, the program I have written, you just copy on the line. About the mouse pointing to a link to show the content of the link, this is the layer of the Visible property control, with Dreamweaver users, with behaviors is easy to achieve, but in this article I have a small program to control the visible properties of the layer, So that no Dreamweaver users can easily make the effect of this article.

Production method:

1, insert the following program into the Web page source code

<style>//This is a CSS style sheet that defines the appearance properties of a layer
<!--
. 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" >//program started
<!--
NS4 = (document.layers)? True:false//Detection browser.
ie4 = (document.all)? True:false
function Showobject (obj) {//displays the specified layer.
if (ns4) obj.visibility = "Show"
else if (ie4) obj.visibility = "visible"
}
function Hideobject (obj) {//hides the specified layer.
if (ns4) obj.visibility = "Hide"
else if (ie4) obj.visibility = "hidden"
}
function Rotateobj (ctrl) {//functions that enable the menu layer to rotate or stop the rotation.
if (ctrl) {//If CTRL is true, start to calculate the movement coordinates of the layers and start the rotation.
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); Refresh every 50 Zuo seconds.
}
else//If CTRL is not true, the rotation is stopped.
Cleartimeout (Rotatetimer);
}
function initobj () {//initialization functions, preparing basic data for the rotation of a layer
objects = new Array (ROTATEDIV1, Rotatediv2, Rotatediv3, ROTATEDIV4); Array of Menu Layer objects
pos = new Array (); An array of menu layer positions that holds the center angle (radians) of the initial position.
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; The rotation radius can be modified as needed.
var Xoff = 280; Rotation Center X coordinate
var yoff = 170; Rotation Center y-coordinate
var pi = Math.PI;
var inc = PI/180; Rotate the step, the denominator to small, then rotate faster.
-->
</script>

When referencing this program, note the following points:

1 The rotation radius can be modified to adjust the size of the rotating range;

2 Modify the rotation center of the x, y coordinates, you can move the rotation effect to any place on the page.