Okay, here is some code Vladdy wrote to demonstrate arc movement, and then I bastardized it for my own evil purposes.
First, I'm sure I don't need that whole regressTarget() function to make the iframes spin in the opposite direction, but I don't know where else to change it.
Second, the angleStep increment is set to 1 for maximum fluidity of motion, but you'd have to click a button many many times this way to produce just a little bit of movement. Is there a way to make one click of the button call a function many times instead? I can't seem to find the words to produce a satisfactory search in Google.
Thanks for your help, whoever you may be.
Assenheimer
PHP Code:
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Spinne the Iframe</title>
<style>
body
{ font-family: Arial,sans-serif;
}
iframe
{ height: 130px;
width: 192px;
}
#target1
{ position: absolute;
background-color: transparent;
}
#target2
{ position: absolute;
background-color: transparent;
}
#target3
{ position: absolute;
background-color: transparent;
}
#target4
{ position: absolute;
background-color: transparent;
}
</style>
<script>
var angle = 0;
var angleStep = 1;
var longR = 200;
var shortR = 150;
var Xo = 250;
var Yo = 150;
var objects=new Array({id:'target1',delay:0},{id:'target2',delay:1.0},{id:'target3',delay:2.0},{id:'target4',delay:3.0});
function advanceTarget()
{ a = angle*Math.PI/180;
for(var i=0; i<objects.length; i++)
{ X = Math.floor(longR*Math.cos(a - objects[i].delay));
Y = Math.floor(shortR*Math.sin(a - objects[i].delay));
with(document.getElementById(objects[i].id).style)
{ top = (Yo + Y) + 'px';
left = (Xo + X) + 'px';
}
}
angle+=angleStep;
angle = angle>359? angle-360:angle;
return;
}
function regressTarget()
{ a = angle*Math.PI/180;
for(var i=0; i<objects.length; i++)
{ X = Math.floor(longR*Math.cos(a - objects[i].delay));
Y = Math.floor(shortR*Math.sin(a - objects[i].delay));
with(document.getElementById(objects[i].id).style)
{ top = (Yo + Y) + 'px';
left = (Xo + X) + 'px';
}
}
angle-=angleStep;
angle = angle>359? angle-360:angle;
return;
}
</script>
</head>
<body onload="setInterval('advanceTarget()',0)">
<div id="target1"><iframe frameborder=0 src="C:\Documents and Settings\jcapra\Desktop\CDCI Web\smallgreen.htm" scrolling="no" allowTransparency="true"></iframe></div>
<div id="target2"><iframe frameborder=0 src="C:\Documents and Settings\jcapra\Desktop\CDCI Web\smallorange.htm" scrolling="no" allowTransparency="true"></iframe></div>
<div id="target3"><iframe frameborder=0 src="C:\Documents and Settings\jcapra\Desktop\CDCI Web\smallpurple.htm" scrolling="no" allowTransparency="true"></iframe></div>
<div id="target4"><iframe frameborder=0 src="C:\Documents and Settings\jcapra\Desktop\CDCI Web\smallyarl.htm" scrolling="no" allowTransparency="true"></iframe></div>
<input type="button" onmousedown="return advanceTarget()">
<input type="button" onmousedown="return regressTarget()">
</body>
</html>
Second, the angleStep increment is set to 1 for maximum fluidity of motion, but you'd have to click a button many many times this way to produce just a little bit of movement. Is there a way to make one click of the button call a function many times instead? I can't seem to find the words to produce a satisfactory search in Google.
Thanks for your help, whoever you may be.
Assenheimer
Comment