Demo Dynamic HTML - Simulación del sistema solar

Simulazione sistema solare

Compatibilidad: Ms Internet Explorer, Netscape

Esta demo es otro ejemplo significativo de las potencialidades del HTML dinámico.
En este caso particular, se simula el movimiento de la Tierra alrededor del sol y de la luna en torno a nuestro planeta

[ 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">
<!--

n = (document.layers) ? 1:0
ie = (document.all) ? 1:0

function init() {
	earthMoon = new dynLayer("earthMoonDiv")
	moon = new dynLayer("moonDiv","earthMoonDiv")
	earthMoon.circle(125,1.5,0,null,20)
	moon.circle(40,-4,0,null,20)
}

// Dynamic Layer with Circle Method
function dynLayer(id,nestref) {
	if (n) {
		if (nestref) {
			this.css = eval("document." + nestref + ".document." + id)
			this.ref = eval("document." + nestref + ".document." + id + ".document")
		}
		else {
			this.css = document.layers[id]
			this.ref = document.layers[id].document
		}
		this.x = this.css.left
		this.y = this.css.top
	}
	else if (ie) {
		this.css = document.all[id].style
		this.ref = document
		this.x = this.css.pixelLeft
		this.y = this.css.pixelTop
	}
	this.obj = id + "Object"
	eval(this.obj + "=this")
	this.moveBy = dynLayerMoveBy
	this.moveTo = dynLayerMoveTo
	this.show = dynLayerShow
	this.hide = dynLayerHide
	this.circle = dynLayerCircle
	this.circleSlide = dynLayerCircleSlide
}
function dynLayerMoveBy(x,y) {
	this.x += x
	this.css.left = this.x
	this.y += y
	this.css.top = this.y
}
function dynLayerMoveTo(x,y) {
	this.x = x
	this.css.left = this.x
	this.y = y
	this.css.top = this.y
}
function dynLayerShow() {
	if (n) this.css.visibility = "show"
	else if (ie) this.css.visibility = "visible"
}
function dynLayerHide() {
	if (n) this.css.visibility = "hide"
	else if (ie) this.css.visibility = "hidden"
}
function dynLayerCircle(radius,angleinc,angle,endangle,speed,vertical,horizontal,fn) {
	if (!vertical) vertical = 1
	if (!horizontal) horizontal = 1
	if (!fn) fn = null
	if (!this.circleActive) {
		var centerX = this.x - horizontal*radius*Math.cos(angle*Math.PI/180)
		var centerY = this.y + vertical*radius*Math.sin(angle*Math.PI/180)
		if (endangle!=null) {
			angleinc = Math.abs(angleinc)
			if (endangle<angle) angleinc*=-1
		}
		this.circleActive = 1
		this.circleSlide(radius,angleinc,angle,endangle,speed,vertical,horizontal,fn,centerX,centerY)
	}
}
function dynLayerCircleSlide(radius,angleinc,angle,endangle,speed,vertical,horizontal,fn,centerX,centerY) {
	if (this.circleActive && (endangle==null || Math.abs(angleinc)<Math.abs(endangle-angle) )) {
		angle += angleinc
		var x = centerX + horizontal*radius*Math.cos(angle*Math.PI/180)
		var y = centerY - vertical*radius*Math.sin(angle*Math.PI/180)
		this.moveTo(x,y)
		setTimeout(this.obj+".circleSlide("+radius+","+angleinc+","+angle+","+endangle+","+speed+","+vertical+","+horizontal+",\""+fn+"\","+centerX+","+centerY+")",speed)
	}
	else {
		this.circleActive = 0
		if (endangle!=null) {
			var x = Math.round(centerX + horizontal*radius*Math.cos(endangle*Math.PI/180))
			var y = Math.round(centerY - vertical*radius*Math.sin(endangle*Math.PI/180))
			this.moveTo(x,y)
		}
		eval(fn)
	}
}

//-->
</SCRIPT>
</HEAD>

<DIV ID="nametext" STYLE="position:absolute; left:5; top:5; width:450;">
<B><FONT COLOR="#FFFFFF" SIZE=2><FONT SIZE=4>S</FONT>istema <FONT SIZE=4>S</FONT>olare<FONT SIZE=4>D</FONT>EMO</FONT></B>
<FONT COLOR="#C0C0C0"> -mira el código fuente del documento para comprender cómo funciona</FONT>
</DIV>

</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]