tutoriais

Flash

FrontPage

Dreamweaver

Dhtml

Html

ASP

PHP

jogos

Galerias

fóruns

Flash

TUTORIAIS DE DHTML

Posiçionamento de imagens.

Imagens que vem se posiçionar por ordem. Belo efeito!

Demo : Para rever o efeito faz: "refresh".

1. Inserir entre os tags <HEAD>...</HEAD>:

///////////////////////////////////////////
function checkBrowser(){
	this.ver=navigator.appVersion
	this.dom=document.getElementById?1:0
	this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;
	this.ie4=(document.all && !this.dom)?1:0;
	this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;
	this.ns4=(document.layers && !this.dom)?1:0;
	this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)
	return this
}
bw=new checkBrowser()

function makeObj(obj,speed,xmove,ymove,works){
	this.el=bw.dom? document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?document.layers[obj]:0;	
  	this.css=bw.dom || bw.ie4?this.el.style:bw.ns4?this.el:0;
	this.moveIt=b_moveIt;
}
function b_moveIt(x,y){
this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y;
}

var posArray,oZdivs;
function introInit(){
	pageXcenter=bw.ns4 ||bw.ns5?innerWidth/2:document.body.offsetWidth/2
	pageYcenter=bw.ns4||bw.ns5?innerHeight/2:document.body.offsetHeight/2
	oZdivs=new Array()
	for(i=0;i<numberOfLetters;i++){
		oZdivs[i]=new makeObj('div'+i)
		oZdivs[i].moveIt(-200,0)
		oZdivs[i].css.visibility='visible'
	}
	if(animation==4) animation=Math.round(Math.random()*2)+1
	if(!testing) eval('anim'+animation+'(0)')
	else testIt()
}
function testIt(){
	for(i=0;i<oZdivs.length;i++){
    	oZdivs[i].moveIt((pageXcenter+xpos[i]),(pageYcenter+ypos[i]))
	}	
}

// Intro 1
xPath1=new Array(-277,-271,-264,-255,-245,-234,-223,-210,-196,-181,-161,-134,-98,-52,1,53,98,131,151,156,147,124,92,59,0)
yPath1=new Array(-240,-206,-162,-114,-64,-16,29,71,112,151,187,217,241,255,260,254,239,213,179,143,108,77,51,30,0)
function anim1(num,test){
	if(num<oZdivs.length){
		st=test?test:0;
		animX(num,'xPath1','yPath1',aspeed,st,'anim1('+(num+1)+','+st+')')
	}
}
// Intro 2
xPath2=new Array(-285,-270,-255,-240,-225,-210,-195,-180,-165,-150,-135,-120,-105,-90,-75,-60,-45,-30,-15,0)
yPath2=new Array(-353,-344,-335,-324,-312,-299,-285,-270,-254,-236,-218,-198,-177,-155,-132,-108,-83,-56,-29,0)
function anim2(num){
	if(num<oZdivs.length){
		animX(num,'xPath2','yPath2',aspeed,0,'anim2('+(num+1)+')')
	}
}
// Intro 3
xPath3=new Array(0,-2,-6,-13,-23,-36,-50,-66,-83,-100,-117,-134,-150,-164,-177,-187,-194,-198,-200,-198,-194,-187,-177,-164,-150,-134,-117,-100,-83,-66,-50,-36,-23,-13,-6,-2,0)
yPath3=new Array(0,-17,-34,-50,-64,-77,-87,-94,-98,-100,-98,-94,-87,-77,-64,-50,-34,-17,0,17,34,50,64,77,87,94,98,100,98,94,87,77,64,50,34,17,0)
function anim3(num){
	if(num<oZdivs.length){
		animX(num,'xPath3','yPath3',aspeed,0,'anim3('+(num+1)+')')
	}
}

// Animation 
function animX(divnum,arrayX,arrayY,speed,num,fn){
	arrayXr = new Array(); arrayYr = new Array()
	arrayXr = eval(arrayX); arrayYr = eval(arrayY)
	arrayX = "'"+arrayX+"'"; arrayY = "'"+arrayY+"'"
	if(num<arrayXr.length){
    	oZdivs[divnum].moveIt(arrayXr[num]+(pageXcenter+xpos[divnum]),arrayYr[num]+(pageYcenter+ypos))
		num++;
		setTimeout("animX("+divnum+","+arrayX+","+arrayY+","+speed+","+num+",'"+fn+"')",speed)
	}else eval(fn)
}
onload=introInit;
</script>

Configurar as seguintes variaveis:

A largura da imagem
width=40
A altura da imagem
height=40
A quantidade de imagens.
numberOfLetters=5
A posição vertical das imagens (em relação ao centro).
ypos=-300
A posição horizontale das imagens (em relação ao centro).
Paciência e perseverência é de rigor aqui...
xpos=new Array()
xpos[0]=-221
xpos[1]=-180
xpos[2]=-139
xpos[3]=-98
xpos[4]=-57
Par simplificar o vosso trabalho, o autor criou uma variable (testing)
que na posição 1, mostra as imagens sem dar a animação.
testing=0
Três animações são possiveis.
Posição 1,2 ou 3, 4 para ser ao acaso.
animation=1
A velocidade da animação.
aspeed=10

2. Inserir entre os tags <BODY>...<BODY>:

ANÚNCIOS