Demo Dynamic HTML - Estrellas en movimiento

Estrellas en movimiento

Compatibilidad: Ms Internet Explorer, Netscape

Imágenes de estrellas que se mueven y expanden desde y hacia un centro.

[ 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 slantedHover(obj,amplitude,angleinc,anglestart,speed,slantAngle) {
	if (navigator.appName=="Netscape")
		this.obj = eval("document." + obj)
	if (navigator.appName=="Microsoft Internet Explorer")
		this.obj = eval(obj + ".style")
	this.amplitude = amplitude
	this.angleinc = angleinc
	this.anglestart = anglestart
	this.angle = anglestart
	this.speed = speed
	this.slantAngle = slantAngle
	this.active = 0
	this.x = parseInt(this.obj.left)
	this.y = parseInt(this.obj.top)
	var u = this.amplitude*Math.sin(this.angle*Math.PI/180)
	var a = this.slantAngle*Math.PI/180
	this.centerX = this.x - u*Math.cos(a)
	this.centerY = this.y + u*Math.sin(a)
	this.move = slantedHoverMove

// reset added so that I can easily reset the hover object
	this.reset = slantedHoverReset
}

function slantedHoverMove() {
	this.angle += this.angleinc
	var u = this.amplitude*Math.sin(this.angle*Math.PI/180)
	var a = this.slantAngle*Math.PI/180
	this.x = this.centerX + u*Math.cos(a)
	this.y = this.centerY - u*Math.sin(a)
	this.obj.left = Math.round(this.x)
	this.obj.top = Math.round(this.y)
}

// reset added so that I can easily reset the hover object
function slantedHoverReset() {
	this.active = 0
	this.angle = 270
	this.obj.left = 200
	this.obj.top = 200
}

function init() {
	block1 = new slantedHover("b1",50,7,270,20,0)
	block2 = new slantedHover("b2",70,7,270,20,45)
	block3 = new slantedHover("b3",50,7,270,20,90)
	block4 = new slantedHover("b4",70,7,270,20,135)
	block5 = new slantedHover("b5",50,7,270,20,180)
	block6 = new slantedHover("b6",70,7,270,20,225)
	block7 = new slantedHover("b7",50,7,270,20,270)
	block8 = new slantedHover("b8",70,7,270,20,315)
}

function moveBlocks() {
	if (block1.active) {
		block1.move()
		block2.move()
		block3.move()
		block4.move()
		block5.move()
		block6.move()
		block7.move()
		block8.move()
		setTimeout("moveBlocks()",block1.speed)
	}
}

function start() {
	if (!block1.active) {
		block1.active = 1
		moveBlocks()
	}
}
function stop() {
	block1.active = 0
}
function reset() {
	block1.reset()
	block2.reset()
	block3.reset()
	block4.reset()
	block5.reset()
	block6.reset()
	block7.reset()
	block8.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]