tutoriais

Flash

FrontPage

Dreamweaver

Dhtml

Html

ASP

PHP

jogos

Galerias

fóruns

Flash

TUTORIAIS DE DHTML

Textos que aparecem com uma transição em lamelas.

Este script recorta os textos para para obter uma transição em lamelas.

Demo : A decorrer.

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

<script>
<!--

// Vossas mensagens aqui
var message = new Array()
message[0]="Scripts Dhtml"
message[1]="Uma compilação dos melhores scripts da Web"
message[2]="o Truques e Dicas, aprenda com ele!"

// Os links associados as mensagens sinão útilisar "#"
var messageurl = new Array()
messageurl[0]="www.truques e Dicas.com/tutoriais/dhtml"
messageurl[1]="#"
messageurl[2]="www.truques e Dicas.com"

// O atributo target dos links (codificação Html)
var target_url="_top"
	
// A largura da banda de texto
var textwidth=255

// A altura da banda de texto
var textheight=110

// A beira da banda do texto
var borderwidth=0

// O tamanho do tipo de letra
var font_size=5

// O tipo de letra
var font_face="Arial"

// A cor dos caracteres
var font_color="navy"

// A cor do fundo
var bg_ticker="lightblue"

// A posição horizontal da caixa de texto
var x_finalpos=100

// A posição vertical da caixa de texto
var y_finalpos=100

// O número de lamelas
var x_slices=12

// O tempo de pausa entre as mensagens (en milisegundos)
var pause=2000

///////////////////////////////////////////////
var i_loop=0
var i_message=0
var width_slice=Math.ceil(textwidth/x_slices)
var cliptop=0
var clipbottom=textheight
var i_clipright=1
var content=""

function openlamellar() {
	clipleft=-width_slice
	clipright=0
    if (i_clipright<=width_slice) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.all.s"+i+".style")
            thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
            clipleft+=width_slice
            clipright=clipleft+i_clipright
		}
    i_clipright++
    var timer=setTimeout("openlamellar()",20)
   }
   	else {
		clearTimeout(timer)
		var timer=setTimeout("closelamellar()",2000)
	}
}

function openlamellarNN() {
	clipleft=-width_slice
	clipright=0
    if (i_clipright<=width_slice) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.s"+i)
			thiss.clip.left=clipleft
        	thiss.clip.right=clipright
        	thiss.clip.top=cliptop
        	thiss.clip.bottom=clipbottom
            clipleft+=width_slice
            clipright=clipleft+i_clipright
		}
    i_clipright++
    var timer=setTimeout("openlamellarNN()",20)
   }
   	else {
		clearTimeout(timer)
		var timer=setTimeout("closelamellarNN()",2000)
	}
}

function closelamellar() {
    clipleft=-width_slice
	clipright=0
    if (i_clipright>=0) {
        for (i=0;i<=x_slices;i++) {
            var thiss=eval("document.all.s"+i+".style")
            thiss.clip ="rect("+cliptop+" "+clipright+" "+clipbottom+" "+clipleft+")"
            clipleft+=width_slice
            clipright=clipleft+i_clipright
		}
    i_clipright--
    var timer=setTimeout("closelamellar()",20)
    
   }
   	else {
		clearTimeout(timer)
		var timer=setTimeout("changeimage()",2000)
	}
}

function closelamellarNN() {
    clipleft=-width_slice
	clipright=0
    if (i_clipright>=0) {
        for (i=0;i<=x_slices;i++) {
           	var thiss=eval("document.s"+i)
			thiss.clip.left=clipleft
        	thiss.clip.right=clipright
        	thiss.clip.top=cliptop
        	thiss.clip.bottom=clipbottom
            clipleft+=width_slice
            clipright=clipleft+i_clipright
		}
    i_clipright--
    var timer=setTimeout("closelamellarNN()",20)
    
   }
   	else {
		clearTimeout(timer)
		var timer=setTimeout("changeimageNN()",2000)
	}
}

function changeimage() {
    content=""
	if (i_message>message.length-1) {i_message=0}
    content+="<table border="+borderwidth+" cellpadding='3' width="+textwidth+" height="+textheight+">"
    content+="<tr><td bgcolor="+bg_ticker+" align='center'>"
    content+="<a href="+message[i_message]+" target="+target_url+">"
    content+="<font face="+font_face+" size="+font_size+" color="+font_color+">"
    content+=message[i_message]
    content+="</font></a></td></tr></table>"
	for (i=0;i<=x_slices-1;i++) {
        var thisinners=eval("s"+i)
        thisinners.innerHTML=content   
    }
	i_message++
	openlamellar()
}

function changeimageNN() {
    content=""
	if (i_message>message.length-1) {i_message=0}
    content+="<table border="+borderwidth+" cellpadding='3' width="+textwidth+" height="+textheight+">"
    content+="<tr><td bgcolor="+bg_ticker+" align='center'>"
    content+="<a href="+message[i_message]+" target="+target_url+">"
    content+="<font face="+font_face+" size="+font_size+" color="+font_color+">"
    content+=message[i_message]
    content+="</font></a></td></tr></table>"
	for (i=0;i<=x_slices-1;i++) {
        var thisinners=eval("document.s"+i+".document")
        thisinners.write(content)
		thisinners.close()
    }
	i_message++
	openlamellarNN()
}

// -->
</script>
<style>
.s {position:absolute;
    left:-5000px;
    topt:-5000px;
}
A {text-decoration:none;}
</style>

Pode configurar:

Vossas mensagens aqui
var message = new Array()
message[0]="Scripts Dhtml"
message[1]="Uma compilação dos melhores scripts da Web"
message[2]="o Truques e Dicas, aprenda com ele!"
Os links associados as mensagens sinão útilisar "#"
var messageurl = new Array()
messageurl[0]="www.truques e Dicas.com/tutoriais/dhtml"
messageurl[1]="#"
messageurl[2]="www.truques e Dicas.com"
O atributo target dos links (codificação Html)
var target_url="_top"
A largura da banda de texto
var textwidth=255
A altura da banda de texto
var textheight=110
A beira da banda do texto
var borderwidth=0
O tamanho do tipo de letra
var font_size=5
O tipo de letra
var font_face="Arial"
A cor dos caracteres
var font_color="navy"
A cor do fundo
var bg_ticker="lightblue"
A posição horizontal da caixa de texto
var x_finalpos=100
A posição vertical da caixa de texto
var y_finalpos=100
O número de lamelas
var x_slices=12
O tempo de pausa entre as mensagens (en milisegundos)
var pause=2000

2. Inserir dentro do tag <BODY>:

3. Inserir logo depois do tag <BODY>:

ANÚNCIOS