Demo Dynamic HTML - Estrellas en movimiento circular

Estrellas en movimiento circular

Compatibilidad: Ms Internet Explorer, Netscape

Pequeńas imágenes de estrellas que giran, en continuo movimiento, alrededor de un centro ideal.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

<TITLE>Demo Dynamic HTML: ejemplo práctico </TITLE>

<SCRIPT LANGUAGE="JavaScript">
<!--

function slantedCircle(obj,radius,angleinc,anglestart,direction,speed,vertical,horizontal,slantAngle) {
	if (navigator.appName=="Netscape")
		this.obj = eval("document." + obj)
	if (navigator.appName=="Microsoft Internet Explorer")
		this.obj = eval(obj + ".style")
	this.radius = radius
	this.angleinc = angleinc
	this.anglestart = anglestart
	this.angle = this.anglestart
	this.direction = direction
	this.speed = speed
	this.vertical = vertical
	this.horizontal = horizontal
	this.slantAngle = slantAngle
	this.active = 0
	this.startX = parseInt(this.obj.left)   // start values were inserted so I can move them back easily
	this.startY = parseInt(this.obj.top)
	this.x = this.startX
	this.y = this.startY
	var u = this.horizontal*this.radius*Math.cos(this.angle*Math.PI/180)
	var v = this.vertical*this.radius*Math.sin(this.angle*Math.PI/180)
	var a = this.slantAngle*Math.PI/180;
	this.centerX = this.x - (u*Math.cos(a) - v*Math.sin(a))
	this.centerY = this.y + (u*Math.sin(a) + v*Math.cos(a))
	this.move = slantedCircleMove
	this.reset = slantedCircleReset
}

function slantedCircleMove() {
	this.angle += this.direction*this.angleinc
	var u = this.horizontal*this.radius*Math.cos(this.angle*Math.PI/180)
	var v = this.vertical*this.radius*Math.sin(this.angle*Math.PI/180)
	var a = this.slantAngle*Math.PI/180;
	this.x = this.centerX + (u*Math.cos(a) - v*Math.sin(a))
	this.y = this.centerY - (u*Math.sin(a) + v*Math.cos(a))
	this.obj.left = this.x
	this.obj.top = this.y
}

function slantedCircleReset() {
	this.active = 0
	this.angle = 0
	this.obj.left = this.startX
	this.obj.top = this.startY
}

function init() {
	circle1 = new slantedCircle("block1",100,6,0,1,20,0.3,1,0)
	circle2 = new slantedCircle("block2",100,6,0,1,20,0.3,1,45)
	circle3 = new slantedCircle("block3",100,6,0,1,20,0.3,1,90)
	circle4 = new slantedCircle("block4",100,6,0,1,20,0.3,1,135)
	circle5 = new slantedCircle("block5",100,6,0,1,20,0.3,1,180)
	circle6 = new slantedCircle("block6",100,6,0,1,20,0.3,1,225)
	circle7 = new slantedCircle("block7",100,6,0,1,20,0.3,1,270)
	circle8 = new slantedCircle("block8",100,6,0,1,20,0.3,1,315)
}

function moveBlocks() {
	if (circle1.active) {   // only need 1 active value to determine when to stop them all
		circle1.move()
		circle2.move()
		circle3.move()
		circle4.move()
		circle5.move()
		circle6.move()
		circle7.move()
		circle8.move()
		setTimeout("moveBlocks()",circle1.speed)
	}
}

function start() {
	if (!circle1.active) {
		circle1.active = 1
		moveBlocks()
	}
}
function stop() {
	circle1.active = 0
}
function reset() {
	circle1.reset()
	circle2.reset()
	circle3.reset()
	circle4.reset()
	circle5.reset()
	circle6.reset()
	circle7.reset()
	circle8.reset()
}

//-->
</SCRIPT>

</HEAD>

<A HREF="javascript:start()">Adelante</A>
<BR><A HREF="javascript:stop()">Para</A>
<BR><A HREF="javascript:reset()">Vuelve a empezar</A>

</body>
</html>

[Baja en un único archivo .zip, las imágenes y demás archivos necesarios
para el funcionamiento de las demo de esta sección]