How can I have pictures move automatically in a circular motion?

  • Thread starter Thread starter Guest
  • Start date Start date
G

Guest

On frontpage, I am trying to have different links, which are pictures, rotate
in a "ferris wheel" motion on the web page?
 
You would need to search for JavaScript script to do this.

--
==============================================
Thomas A. Rowe
Microsoft MVP - FrontPage
==============================================
Agents Real Estate Listing Network
http://www.NReal.com
==============================================
 
You'd need to animate them in some way, using such a program like Macromedia
Flash, or the similar Swish product.
 
Sounded like a fun problem to solve, so here's something you can start from.

The following HTML/JavaScript has been tested in both IE 6 and FireFox. It
uses an image at the center, which is not necessary, so you can remove it if
you like. I used the image to test and ensure that the "orbiter" image was
indeed circling the center.

It begins by defining the variables used in the <head> of the document. It
also uses absolute CSS positioning, using the window to place the objects.
The first div is the center image. Again, it can be removed if you like. It
is represented by the variable "centerDiv."

The image is outside of a div, and is positioned by itself. It is
initialized to a position at (var) "radius" directly above the center, in
this case 200 pixels. It has the id of "chutney" and is represented by the
variable "orbiter".

The bottom div contains a table and 2 buttons. The buttons start and stop
the circling movement.

cx and cy represent the center of the page. x and y are used to position the
image. The currentAngle varible represents an angle in degrees, where 0 is
directly to the right of the center (this is because of the use of
trigonometry, which places the 0 angle horizontally). The "interval"
variable is the interval at which the position changes, each time by 1
degree.

The functions are:

pixelStyle(i) - Creates a style from a number, in the format of "ipx"
getCoords() - Changes the coordinates of the point that circles the center,
by 1 degree.
moveOrbiter() - Calls getCoords, and assigns the appropriate styles to the
image.
startOrbiter() - Button handler that starts a sequence of repeated calls to
moveOrbiter() at the interval.
stopOrbiter() - Stops the sequence.

You shouldn't have any trouble tweaking it to suit your purposes.

--
HTH,

Kevin Spencer
Microsoft MVP
Chicken Salad Surgery

Orange you bland I stopped splaying bananas?


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252" />
<title>Circle Animation</title>
<script type="text/javascript"> <!--
var win; // Window - used for width and height measurement
var cx, cy, x, y; // center xy, radius xy
var centerOffset = 12;
var orbiterOffset = 64;
var radius = 200;
var centerDiv;
var controlDiv;
var orbiter;
var startAngle = 90; // top of circle
var currentAngle = 90;
var interval = 25; // milliseconds

// --></script>
<style type="text/css">
..style1 {
border-style: solid;
border-width: 0px;
}
</style>
</head>

<body>
<div id="centerDiv" style="position:absolute;"><img
src="images/AirplaneSmall.gif"/> </div>
<img src="images/Uncle-Chutney(glasses).gif" id="chutney"
style="position:absolute"/>
<div style="position: absolute; left: 10px; top: 313px; width: 95px; height:
30px; z-index: 2" id="buttons">
<form>
&nbsp;<table class="style1">
<tr>
<td>
<input name="Button1" type="button" value="Start"
onclick="startOrbiter()"/>&nbsp;</td>
<td>
<input name="Button2" type="button" value="Stop"
onclick="stopOrbiter()"/>&nbsp;</td>
</tr>
</table>
</form>
</div>
<script type="text/javascript"> <!--
win = document.getElementsByTagName("body")[0];
var timerID;

cx = win.offsetWidth / 2;
cy = win.parentNode.clientHeight / 2;
x = cx;
y = cy - radius;
centerDiv = document.getElementById("centerDiv");
orbiter = document.getElementById("chutney");
controlDiv = document.getElementById("buttons");

function pixelStyle(i)
{
return i + "px";
}

function getCoords()
{
currentAngle = currentAngle - 1 < 0 ? 359 : currentAngle - 1;
x = cx + radius * Math.cos(currentAngle * Math.PI / 180);
y = cy - radius * Math.sin(currentAngle * Math.PI / 180);
}

function moveOrbiter()
{
getCoords();
orbiter.style.left = pixelStyle(x - orbiterOffset);
orbiter.style.top = pixelStyle(y - orbiterOffset);
}

function startOrbiter()
{
timerID = setInterval("moveOrbiter()", interval);
}

function stopOrbiter()
{
clearInterval(timerID);
}
controlDiv.style.left = pixelStyle(cx - 50);
controlDiv.style.top = pixelStyle(win.parentNode.clientHeight - 50);
centerDiv.style.left = pixelStyle(cx - centerOffset);
centerDiv.style.top = pixelStyle(cy - centerOffset);
orbiter.style.left = pixelStyle(x - orbiterOffset);
orbiter.style.top = pixelStyle(y - orbiterOffset);

// --></script>
</body>

</html>
 
Back
Top