Entry
How can I move a layer in a circle?
Apr 13th, 2001 12:47
Martin Honnen,
The following sets up a convenient object
CircleLayer
to which you pass a layer id or layer object, the center coordinates of
the circle, the radius of the circle, the animation speed, and optional
the degree incremement.
The code works with IE4+ and NN4+. With Opera 5 only one layer circles
at a time as Opera has bugs/problems to yield execution between
setInterval/setTimeout. Two example layers are included
which are circled around the page center but with different radius and
direction.
<HTML>
<HEAD>
<STYLE>
#aLayer {
position: absolute;
visibility: hidden;
}
#a2ndLayer {
position: absolute;
visibility: hidden;
width: 22px;
height: 22px;
}
.lime {
font-size: 16pt;
color: lime;
background-color: black;
}
</STYLE>
<SCRIPT>
function getLayer (id, doc) {
if (document.all)
return document.all[id];
else if (document.getElementById)
return document.getElementById(id);
else if (document.layers) {
if (!doc)
doc = window.document;
if (doc[id])
return doc[id];
else
for (var l = 0; l < doc.layers.length; l++) {
var layer = getLayer(id, doc.layers[l].document);
if (layer)
return layer;
}
return null;
}
}
function CircleLayer (idOrLayer, cx, cy, r, spd, da) {
this.id = CircleLayer.cnt;
CircleLayer.elements[CircleLayer.cnt++] = this;
this.layer =
typeof idOrLayer == 'object' ? idOrLayer : getLayer(idOrLayer);
this.cx = cx || 100;
this.cy = cy || 100;
this.r = r || 100;
this.da = da || Math.PI / 180;
this.spd = spd || 100;
this.start();
this.tid =
setInterval('CircleLayer.elements[' + this.id + '].circle()',
this.spd);
}
function CircleLayer_start () {
this.alpha = -Math.PI / 2;
this.position();
this.makeVisible();
}
CircleLayer.prototype.start = CircleLayer_start;
function CircleLayer_makeVisible () {
if (document.layers)
this.layer.visibility = 'show';
else
this.layer.style.visibility = 'visible';
}
CircleLayer.prototype.makeVisible = CircleLayer_makeVisible;
function CircleLayer_position () {
this.x = this.cx + this.r * Math.cos(this.alpha);
this.y = this.cy + this.r * Math.sin(this.alpha);
if (document.layers) {
this.layer.left = this.x;
this.layer.top = this.y;
this.layer.visibility = 'show';
}
else if (document.all) {
this.layer.style.pixelLeft = this.x;
this.layer.style.pixelTop = this.y;
this.layer.style.visibility = 'visible';
}
else if (document.getElementById) {
this.layer.style.left = this.x + 'px';
this.layer.style.top = this.y + 'px';
this.layer.style.visibility = 'visible';
}
}
CircleLayer.prototype.position = CircleLayer_position;
function CircleLayer_circle () {
this.alpha += this.da;
this.position();
}
CircleLayer.prototype.circle = CircleLayer_circle;
function CircleLayer_stop () {
clearInterval(this.tid);
}
CircleLayer.prototype.stop = CircleLayer_stop;
function CircleLayer_resume () {
this.tid =
setInterval('CircleLayer.elements[' + this.id + '].circle()',
this.spd);
return this.tid;
}
CircleLayer.prototype.resume = CircleLayer_resume;
CircleLayer.cnt = 0;
CircleLayer.elements = new Array();
</SCRIPT>
<SCRIPT>
var cl1, cl2;
function init () {
var width = window.innerWidth ? window.innerWidth :
document.body.clientWidth;
var height = window.innerHeight ? window.innerHeight :
document.body.clientHeight;
var centerX = Math.floor(width / 2);
var centerY = Math.floor(height / 2);
cl1 = new CircleLayer('aLayer', centerX, centerY, 150, 20);
cl2 = new CircleLayer('a2ndLayer', centerX, centerY, 50, 20, -
Math.PI/180);
}
</SCRIPT>
</HEAD>
<BODY ONLOAD="init();">
<A HREF="javascript: cl1.stop(); void 0">
stop cl1
</A>
|
<A HREF="javascript: cl1.resume(); void 0">
resume cl1
</A>
|
<A HREF="javascript: cl2.stop(); void 0">
stop cl2
</A>
|
<A HREF="javascript: cl2.resume(); void 0">
resume cl2
</A>
<SPAN ID="aLayer">
Kibo
</SPAN>
<SPAN ID="a2ndLayer">
<TABLE BORDER="0" WIDTH="22" HEIGHT="22" CELLPADDING="0" CELLSPACING="0"
BGCOLOR="black"
>
<TR>
<TD ALIGN="center" VALIGN="middle">
<SPAN CLASS="lime">
K
</SPAN>
</TD>
</TR>
</TABLE>
</SPAN>
</BODY>
</HTML>
