Demo Dynamic HTML - Layer "enloquecidos"

Layer "enloquecidos"

Compatibilidad: Ms Internet Explorer

Layer multicolores con movimiento continuo y desordenado.

[ Muestra el ejemplo práctico ]

el código para insertar en tu página

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

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

/*---------------------------- > brattascript start <----------------------------------
######################################################################################*/
/*The function for "making" the objects
######################################################################################*/
	function makeObj(obj,nest){
    	nest=(!nest) ? '':'document.'+nest+'.'
    	this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')
    	this.evnt=(n)? eval(nest+'document.'+obj):eval(obj);
    	this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');
    	this.animateIt=divanimateIt; this.animate=divanimate;
    	this.slide=divslide; this.slideIt=divslideIt;
		this.bg=divbgchange;
    	this.active=false;
		this.left=getleft;
		this.top=gettop
		this.clipIt=divclipIt;
    	this.obj = obj + "Object"; 	eval(this.obj + "=this")
    	return this
	}
/*The function for changing the background
######################################################################################*/
	function divbgchange(color){
		(n) ? this.css.bgColor=color:this.css.backgroundColor=color
	}
/*The functions for getting the top and left of the divs.
######################################################################################*/
	function getleft(){
		var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft);
		return gleft;
	}
	function gettop(){
		var gleft=(n) ? eval(this.css.top):eval(this.css.pixelTop);
		return gleft;
	}
/*The function for sliding the objects
######################################################################################*/
	function divslideIt(xstop,ystop,moveby,speed,fn){
        x=xstop-this.left()
        y=ystop-this.top()
        num=Math.sqrt(Math.pow(x,2) + Math.pow(y,2))/moveby
        x=x/num
        y=y/num 
        if(!this.active) this.slide(x,y,xstop,ystop,speed,fn)
	}
	function divslide(x,y,ystop,xstop,speed,fn){
		if(!fn)fn=null
		  if (Math.floor(Math.abs(x))<Math.floor(Math.abs(xstop-this.left())) || Math.floor(Math.abs(y))<Math.floor(Math.abs(ystop-this.top()))) {
			this.css.left=x+this.left()
        	this.css.top=y+this.top()
			this.active=true
            setTimeout(this.obj+".slide("+x+","+y+","+xstop+","+ystop+","+speed+","+fn+")",speed) 
        }else{
           this.css.top=ystop
            this.css.left=xstop
            this.active=false
			eval(fn)
		}
	}

/*Path animation part
######################################################################################*/
	function divanimateIt(arrayX,arrayY,speed,fn){
        if(!this.active) this.animate(arrayX,arrayY,speed,0,fn)
	}
	function divanimate(arrayX,arrayY,speed,num,fn){
		if(!fn)fn=null
        arrayXr = new Array(); arrayYr = new Array()
        arrayXr = eval(arrayX); arrayYr = eval(arrayY)
        arrayX = "'"+arrayX+"'"; arrayY = "'"+arrayY+"'"
        if(num<arrayXr.length){
        	this.css.left=arrayXr[num]
            this.css.top=arrayYr[num]
            num++; this.active=true
            setTimeout(this.obj+".animate("+arrayX+","+arrayY+","+speed+","+num+",'"+fn+"')",speed)
        }else{
            this.active=false
			eval(fn)
        }
}

/*Clip part
######################################################################################*/
	function divclipIt(stept,stepr,count){
		if(!count)count=0
		var clipval=new Array()
		if(ie) {
			clipval=this.css.clip
			clipval=clipval.slice(5,clipval.length-1);
			clipval=clipval.split(' ')
			clipval[0]=parseInt(clipval[0]);
			clipval[0]=eval(clipval[0]+stept);
			clipval[3]=parseInt(clipval[3]);
			clipval[3]=eval(clipval[3]+stepr);
			this.css.clip="rect("+clipval[0]+","+clipval[1]+","+clipval[2]+","+clipval[3]+")";
		}else{
			this.css.clip.top=eval(this.css.clip.top+stept)
            this.css.clip.right=eval(this.css.clip.right+stepr)
		}
		count++
		if(count!=30){
   			setTimeout(this.obj+".clipIt('"+stepr+"','"+stept+"',"+count+")",50)
		}else{
			count=0
		}
	}
/*----------------------------- > brattascript over <-----------------------------------
######################################################################################*/

function init(){
	main0=new makeObj('divMain')
	main1=new makeObj('divMain1', 'divMain')
	main2=new makeObj('divMain2', 'divMain')
	main3=new makeObj('divMain3', 'divMain')
	main4=new makeObj('divMain4', 'divMain')
	main5=new makeObj('divMain5', 'divMain')
	main6=new makeObj('divMain6', 'divMain')
	main7=new makeObj('divMain7', 'divMain')
	main8=new makeObj('divMain8', 'divMain')
	main9=new makeObj('divMain9', 'divMain')
	main10=new makeObj('divMain10', 'divMain')
	main11=new makeObj('divMain11', 'divMain')
	document.onmouseover=rfunction;
	rfunction()
	setTimeout("rfunction()",100)

}
function ranslide(){
	num=Math.round(Math.random()*10)+1
	num1=Math.round(Math.random()*800)-300
	num2=Math.round(Math.random()*800)-300
	num3=Math.round(Math.random()*50)+10
	num4=Math.round(Math.random()*100)
	eval('main'+num+'.slideIt('+num1+','+num2+','+num3+','+num4+')')
}
function randbg(){
	num=Math.round(Math.random()*11)
	num2=Math.round(Math.random()*10)
	colors=new Array('blue','black','red','white','yellow','teal','silver','maroon','olive','aqua','purple')
	eval('main'+num+'.bg("'+colors[num2]+'")')
}
function ranplacement(){
	num=Math.round(Math.random()*10)+1
	num1=Math.round(Math.random()*800)-300
	num2=Math.round(Math.random()*800)-300
	eval('main'+num+'.css.left='+num1)
	eval('main'+num+'.css.left='+num2)
}
function rananim(){
	num=Math.round(Math.random()*10)+1
	num1=Math.round(Math.random()*5)+1
	num2=Math.round(Math.random()*5)+1
	num3=Math.round(Math.random()*50)
	eval('main'+num+'.animateIt("pathX'+num2+'","pathY'+num2+'",'+num3+')')
}
function ranzindex(){
	num=Math.round(Math.random()*10)+1
	num1=Math.round(Math.random()*10)+1
	eval('main'+num+'.css.zIndex='+num1)
}
function ranclip(){
	num=Math.round(Math.random()*10)+1
	num1=new Array('-','+')
	num2=Math.round(Math.random()*15)
	num5=Math.round(Math.random()*15)
	num3=Math.round(Math.random()*1)
	eval('main'+num+'.clipIt("'+num1[num3]+num5+'","'+num1[num3]+num5+'")')
}
function rfunction(){
	functs=new Array('randbg()','ranslide()', 'ranplacement()','ranzindex()','rananim()', 'ranclip()')
	num=Math.round(Math.random()*6)
	eval(functs[num])
	setTimeout("rfunction()",200)
}

onload=init

pathX1=new Array(68,72,76,80,84,88,92,96,100,104,108,112,116,120,124,128,132,136,140,144,148,152,156,160,164,168)
pathY1=new Array(47,47,47,49,50,53,55,58,62,66,71,76,81,87,94,101,108,116,124,133,143,152,163,173,185,197)
pathX2=new Array(279,277,273,266,256,243,229,213,196,179,162,145,129,115,102,92,85,81,79,81,85,92,102,115,129,145,162,179,195,191,187,183,179,175,171,167,163,159,155,151,147,143,139,135,131,127,123,119,115,111,107,103,99,95,91,87,83,79,75,71,67,63,59,55,51,47,42,44,49,58,70,85,102,121,141,162,183,203,222,239,254,266,275,280,282,287,292,296,299,303,307,310,314,318,322,325,329,333,336,340,344,347,351,355,358,362,366,369,373,377,381,384,388,392,395,399,403,406,410,414,417,421,425,429,432,436,440,443,447,451,454,458,462,465,469,473,476,480,484,488,491,495,499,502,506,510,513,517,521,524,528,532,536,539,543,547,550,554,558,561,565,569,572,576,580,583,587,591,595,598,602,606,609,613,609,605,601,597,593,589,585,581,577,573,569,565,561,557,553,549,545,541,537,533,529,525,521,517,513,509,505,501,497,493,489,485,481,477,473,469,465,461,457,453,449,445,441,437,433,429,425,421,417,413,409,405,401,397,393,389,385,381,377,373,369,365,361,357,353,349,345,341,337,333,329,325,321,317,313,308,299,290,281,273,264,255,246,237,228,220,211,202,193,184,175,167,158,149,140,131,122,114,105,96,87,78,69,61,52,43,34)
pathY2=new Array(235,218,201,185,171,158,148,141,137,135,137,141,148,158,171,185,201,218,235,252,269,285,299,312,322,329,333,335,334,323,313,304,295,287,280,273,266,261,255,251,246,243,240,238,236,234,234,234,234,235,237,239,241,245,248,253,258,263,270,276,283,291,300,309,318,328,337,358,378,397,414,429,441,450,455,457,455,450,441,429,414,397,378,358,337,333,326,323,319,316,312,309,305,302,298,295,292,288,285,281,278,274,271,267,264,260,257,254,250,247,243,240,236,233,229,226,223,219,216,212,209,205,202,198,195,192,188,185,181,178,174,171,167,164,160,157,154,150,147,143,140,136,133,129,126,123,119,116,112,109,105,102,98,95,92,88,85,81,78,74,71,67,64,60,57,54,50,47,43,40,36,33,29,26,26,26,26,26,26,26,27,27,28,28,29,29,30,31,32,32,33,34,35,36,37,38,40,41,42,44,45,46,48,50,51,53,55,56,58,60,62,64,66,68,70,73,75,77,80,82,84,87,90,92,95,98,100,103,106,109,112,115,118,122,125,128,131,135,138,142,145,149,152,156,160,164,168,172,176,178,173,168,163,158,153,148,143,138,133,128,123,118,113,108,103,98,93,88,83,78,73,68,63,58,53,48,43,38,33,28,23)
pathX3=new Array(203,195,185,172,158,141,124,106,87,70,53,38,25,15,7,2,0,2,6,14,24,37,51,68,85,103,122,139,156,171,184,194,202,207,209,208,203)
pathY3=new Array(138,104,72,42,15,-7,-24,-36,-42,-42,-36,-24,-7,16,42,72,104,138,173,207,239,269,295,317,335,346,352,352,346,335,317,295,269,239,206,172,138)
pathX4=new Array(615,611,607,603,599,595,591,587,583,579,575,571,567,563,559,555,551,547,543,539,535,531,527,523,519,515,511,507,503,499,495,491,487,483,479,475,471,467,463,459,455,451,447,443,439,435,431,427,423,419,415,411,407,403,399,395,391,387,383,379,375,371,367,363,359,355,351,347,343,339,335,331,327,323,319,315,312,308,304,300,296,292,288,284,280,276,272,268,264,260,256,252,248,244,240,236,232,228,224,220,216,212,208,204,200,196,192,188,184,180,176,172,168,164,160,156,152,148,144,140,136,132,128,124,120,116,112)
pathY4=new Array(18,18,18,18,18,19,19,20,21,22,23,24,25,27,28,30,31,33,35,37,39,41,43,46,48,51,54,56,59,62,66,69,72,76,79,83,87,91,95,99,103,107,112,116,121,126,130,135,140,146,151,156,162,167,173,179,185,191,197,203,210,216,223,229,236,243,250,257,264,271,279,286,294,302,310,318,322,314,306,299,292,286,279,273,268,262,258,253,249,245,241,238,234,232,229,227,226,224,223,222,222,222,222,222,223,224,226,227,229,232,234,238,241,245,249,253,258,262,268,273,279,286,292,299,306,314,322)
pathX5=new Array(160,159,156,151,144,135,125,114,102,90,78,66,55,45,36,29,24,21,20,21,24,29,36,45,55,66,78,90,192,191,188,183,176,167,157,146,134,122,110,98,87,77,68,61,56,53,52,53,56,61,68,77,87,98,110,122,227,226,223,218,211,202,192,181,169,157,145,133,122,112,103,96,91,88,87,88,91,96,103,112,122,133,145,157)
pathY5=new Array(170,182,194,205,215,224,231,236,239,240,239,236,231,224,215,205,194,182,170,158,146,135,125,116,109,104,101,100,171,183,195,206,216,225,232,237,240,241,240,237,232,225,216,206,195,183,171,159,147,136,126,117,110,105,102,101,167,179,191,202,212,221,228,233,236,237,236,233,228,221,212,202,191,179,167,155,143,132,122,113,106,101,98,97)
pathX6=new Array(16,621,616,603,581,551,514,471,424,373,321,269,218,171,128,91,61,39,26,21,26,39,61,91,128,171,218,269,321,373,424,471,514,551,581,603,616,621,612,581,547,485,447,405,368,328,285,234,204,203,202,202,203,203,203,203,181,174,151,128,112,76,86,96,106,116,126,136,146,156,166,176,186,196,206,216,226,236,246,256,266,276,286,296,306,316,326,336,346,356,366,376)
pathY6=new Array(154,161,171,182,191,200,207,213,217,220,221,220,217,213,207,200,191,182,171,161,151,140,131,122,115,109,105,102,101,102,105,109,115,122,131,140,151,161,161,161,161,161,162,162,162,163,163,163,163,188,225,250,279,296,323,342,359,362,365,365,365,365,313,265,221,180,142,109,78,52,29,9,-7,-19,-28,-34,-35,-34,-28,-19,-7,9,29,52,78,109,142,180,221,265,313,365)
//-->
</script>

</HEAD>

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