Ir para conteúdo
Fórum CódigoFonte.net
cimerio

html - quero fazer os textos aparecerem em determinados períodos

Recommended Posts

o que eu quero é apenas isso, mas estou ficando quase doido. nada que eu use dá certo.

apenas isso:

3 segundos -> aparece escrito: Compre em nossa loja.

5 segundos -> apaga a mensagem anterior e aparece: Temos os melhores preços.

9 segundos -> apaga a anterior e aparece: E o frete é grátis.

apenas isso, fazer aparecer e apagar textos como nas legendas de filmes.

deve existir um meio em html, não é possível que não.

Compartilhar este post


Link para o post
Compartilhar em outros sites

salve tenta esse codigo!

<style type="text/css">

#domticker{

width: 200px;

height: 20px;

border: 0px dashed black;

padding: 5px;

background-color: #FFFFff;

}

#domticker div{

background-color: #FFFFff;

}

.someclass{ 

}

</style>


<script type="text/javascript">

var tickercontent=new Array()

tickercontent[0]='Compre em nossa loja.'

tickercontent[1]='Temos os melhores preços.'

tickercontent[2]='E o frete é grátis.'

</script>



<script type="text/javascript">

function domticker(content, divId, divClass, delay, fadeornot){

this.content=content

this.tickerid=divId //ID of master ticker div. Message is contained inside first child of ticker div

this.delay=delay //Delay between msg change, in miliseconds.

this.mouseoverBol=0 //Boolean to indicate whether mouse is currently over ticker (and pause it if it is)

this.pointer=1

this.opacitystring=(typeof fadeornot!="undefined")? "width: 100%; filter:progid:DXImageTransform.Microsoft.alpha(opacity=100); -moz-opacity: 1" : ""

if (this.opacitystring!="") this.delay+=500 //add 1/2 sec to account for fade effect, if enabled

this.opacitysetting=0.2 //Opacity value when reset. Internal use.

document.write('<div id="'+divId+'" class="'+divClass+'"><div style="'+this.opacitystring+'">'+content[0]+'</div></div>')

var instanceOfTicker=this

setTimeout(function(){instanceOfTicker.initialize()}, delay)

}

domticker.prototype.initialize=function(){

var instanceOfTicker=this

this.contentdiv=document.getElementById(this.tickerid).firstChild //div of inner content that holds the messages

document.getElementById(this.tickerid).onmouseover=function(){instanceOfTicker.mouseoverBol=1}

document.getElementById(this.tickerid).onmouseout=function(){instanceOfTicker.mouseoverBol=0}

this.rotatemsg()

}

domticker.prototype.rotatemsg=function(){

var instanceOfTicker=this

if (this.mouseoverBol==1) //if mouse is currently over ticker, do nothing (pause it)

setTimeout(function(){instanceOfTicker.rotatemsg()}, 100)

else{

this.fadetransition("reset") //FADE EFFECT- RESET OPACITY

this.contentdiv.innerHTML=this.content[this.pointer]

this.fadetimer1=setInterval(function(){instanceOfTicker.fadetransition('up', 'fadetimer1')}, 100) //FADE EFFECT- PLAY IT

this.pointer=(this.pointer<this.content.length-1)? this.pointer+1 : 0

setTimeout(function(){instanceOfTicker.rotatemsg()}, this.delay) //update container

}

}

domticker.prototype.fadetransition=function(fadetype, timerid){

var contentdiv=this.contentdiv

if (fadetype=="reset")

this.opacitysetting=0.2

if (contentdiv.filters && contentdiv.filters[0]){

if (typeof contentdiv.filters[0].opacity=="number") //IE6+

contentdiv.filters[0].opacity=this.opacitysetting*100

else //IE 5.5

contentdiv.style.filter="alpha(opacity="+this.opacitysetting*100+")"

}

else if (typeof contentdiv.style.MozOpacity!="undefined" && this.opacitystring!=""){

contentdiv.style.MozOpacity=this.opacitysetting

}

else

this.opacitysetting=1

if (fadetype=="up")

this.opacitysetting+=0.2

if (fadetype=="up" && this.opacitysetting>=1)

clearInterval(this[timerid])

}

</script>



<script type="text/javascript">

new domticker(tickercontent, "domticker", "someclass", 3000, "fadeit")

</script>

abraços!

Compartilhar este post


Link para o post
Compartilhar em outros sites

ray, valeu. axei fantastico.

estava começando a axar q nao tinha mais jeito.

agora, o q eu preciso, era setar essas aparições num tempo determinado.

digo, não a cada 3 segundos, ou 2 segundos.

mas no tempo msm. tickercontent[0] apareceria 00:00:03.5 e apagaria 00:00:06.0

tickercontent[1] apareceria 00:00:08:0 e apagaria 00:00:11.3

meu objetivo é realmente uma legenda. tenho q implementar dentro de uma area html (form, table...). para isso, posso usar xml, javascript ou outra linguagem associada (php não).

haveria um meio de fazer isso?

Compartilhar este post


Link para o post
Compartilhar em outros sites

Crie uma conta ou entre para comentar

Você precisar ser um membro para fazer um comentário

Criar uma conta

Crie uma nova conta em nossa comunidade. É fácil!

Crie uma nova conta

Entrar

Já tem uma conta? Faça o login.

Entrar Agora

×
×
  • Criar Novo...