Jump to content

POWERED BY:

Archived

This topic is now archived and is closed to further replies.

brcontainer

Efeito marquee CSS+JS

By brcontainer, in Javascript

Recommended Posts

brcontainer    16

brcontainer
Posted

[motivo dessa script] desuzo da TAG marquee

vi varias pessoas pedindo efeito MARQUEE em JAVASCRIPT

achei uns mas o que eles faziam eles DIVIDIAM a STRING

 

tipo letra por letra

 

e assim tags de HTML não rolavam direito

 

então fiz esse EFEITO

Efeito estilo marquee que "ROLA" tags de HTML tambem

 

CSS+JS

 

e pronto um efeito bem parecido ^^ com opções de TOP, LEFT, RIGHT e DOWN

e opção de "intervalo" de tempo =]

 

[CODIGO ATUALIZADO]

coloquei as opções "PLAY" e "STOP" pro efeito travar e destravar

<html>
<head>
<title>marquee css+js by silverfox</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
/*<![CDATA[*/
#caixa{
background:#fc0;
width:600px;
height:100px;
overflow:hidden;
}
#marquee{
width:400px;
background:#ddd;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var Rollar = "sim";
var tipo = "left";
var roll = 0;
var tmp = 29;

function Duplicar(){
	var Marquee = document.getElementById("Marquee");
	Cont = Marquee.innerHTML;
	if (tipo=="left" || tipo=="right"){
		IDA = "<div style=\"float:left; position:relative;margin-left:-"+Marquee.clientWidth+";width:"+Marquee.clientWidth+"; height:"+Marquee.clientHeight+";\">"+Cont+"</div>";
		IDB = "<div style=\"float:right; position:relative;margin-right:-"+Marquee.clientWidth+";width:"+Marquee.clientWidth+"; height:"+Marquee.clientHeight+";\">"+Cont+"</div>";
		IDC = IDA + IDB + Cont;
	}
	if(tipo=="top" || tipo=="down"){
		IDA = "<div style=\"float:left; position:relative;margin-top:-"+Marquee.clientHeight+";width:"+Marquee.clientWidth+"; height:"+Marquee.clientHeight+";\">"+Cont+"</div>";
		IDB = "<div style=\"float:left; position:relative;margin-bottom:-"+Marquee.clientHeight+";width:"+Marquee.clientWidth+"; height:"+Marquee.clientHeight+";\">"+Cont+"</div>";
		IDC = IDA + Cont + IDB;
	}
	Marquee.innerHTML = IDC;
}
function Fmarquee(){
	var Marquee = document.getElementById("Marquee");
	var Caixa = document.getElementById("caixa");

if(tipo=="left" || tipo=="right"){
	var Altura = Caixa.clientWidth;
}else if(tipo=="down" || tipo=="top"){
	var Altura = Caixa.clientHeight;
}

	roll++;

	if(Altura==roll){
		roll = (roll*-1);
	}

	if(tipo == "top"){
		Marquee.style.marginTop = (roll*-1)+"px";
	} else if (tipo == "down"){
		Marquee.style.marginTop = roll+"px";
	} else if (tipo == "left"){
		Marquee.style.marginLeft = (roll*-1)+"px";
	} else if (tipo == "right"){
		Marquee.style.marginLeft = roll+"px";
	}

	if(Rollar == "sim"){
	   setTimeout("Fmarquee()",tmp);
	}
}
function playM(){
	Rollar = "sim";
	Fmarquee();
}

function stopM(){
	Rollar = "nao";
}

window.onload = function(){
	Rollar = "sim";
	Fmarquee();
	Duplicar();
}
//]]>
</script>

</head>
<body>
  <div id="caixa" onmouseout="playM();" onmouseover="stopM();">
	<div id="Marquee">
		<img src="foto.gif" alt="foto" width="100" height="100">
	  </div>
  </div>
</body>
</html>

não coloquei na sessão de TUTORIAIS ou LABOTARIO pois espero a aceitação do pessoal

quanto ao meu código ^^

 

se acaso alguem tiver um codigo melhor ou mais simples ou mais eficinte

posta ae ^^

 

o topico esta aberto a discussões sobre melhoras no codigo

 

em breve vou por a opção BEHAVIOUR(opicional)

 

abraços...

[atualizado]

Share this post

Link to post
Share on other sites

programador php    0

programador php
Posted

bem legal e tal mas eu nao achei a parte onde você coloca pra rodar,ele roda quantas vezes?

eh q eu queria colocar anuncios mas nao acho essa parte http://forum.imasters.com.br/public/style_emoticons/default/natal_sad.gif

dentro da div Marquee

 

abraçoo

 

 

 

este codigo abaixo

 

para o conteudo por alguns segundos(3) no codigo esta como 3000 devido a ser em mili

 

 

<html>
<head>
<title>marquee css+js by silverfox</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style rel="stylesheet" type="text/css">
/*<![CDATA[*/
#caixa{
background:#fc0;
width:200px;
height:200px;
overflow:hidden;
}
#marquee{
margin:0px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var Rollar = "sim";
var roll = 0;
function Fmarquee(tmp,tipo){
	var Marquee = document.getElementById("Marquee");
	var Caixa = document.getElementById("caixa");
	var Altura = Caixa.clientHeight;
	roll++;
	if(Altura==roll){
		roll = (roll*-1);
		roll = (roll+100);
	}
	if(roll == 175){
		stopM();
		setTimeout("playM()", 3000);
	}

	if(tipo == "top"){
		Marquee.style.marginTop = roll+"px";
	} else if (tipo == "down"){
		Marquee.style.marginTop = roll+"px";
	} else if (tipo == "left"){
		Marquee.style.marginLeft = roll+"px";
	} else if (tipo == "right"){
		Marquee.style.marginRight = roll+"px";
	}
	
	if(Rollar == "sim"){
		setTimeout("Fmarquee("+tmp+",'"+tipo+"')",tmp);
	}
}
function playM(){
	Rollar = "sim";
	Fmarquee('50','top');
	//setTimeout(code,millisec)
}

function stopM(){
	Rollar = "nao";
}

function OnloadB(){
	Rollar = "sim";
	Fmarquee('50','top');
}

window.onload = OnloadB;
//]]>
</script>

</head>
<body>
  <div id="caixa" onmouseout="playM();" onmouseover="stopM();">
	<div id="Marquee">
		teste
	</div>

  </div>
</body>
</html>

Share this post

Link to post
Share on other sites

Roots    0

Roots
Posted

Parabéns Silverfox o efeito está show!

 

Porém tenho uma dúvida, ñ tenho muito conhecimento em java mas já fucei o código e ñ consegui o resultado esperado.

 

Como faço p/colocar ele subindo ao invés de descendo?

 

Outra coisa, qndo ele começa o texto já está aparecendo, como fazer p/ele começar e o texto aparecer aos poucos?

Share this post

Link to post
Share on other sites

programador php    0

programador php
Posted

Parabéns Silverfox o efeito está show!

 

Porém tenho uma dúvida, ñ tenho muito conhecimento em java mas já fucei o código e ñ consegui o resultado esperado.

 

Como faço p/colocar ele subindo ao invés de descendo?

 

Outra coisa, qndo ele começa o texto já está aparecendo, como fazer p/ele começar e o texto aparecer aos poucos?

muda aqui

 

Fmarquee('50','top');

 

 

por 

Fmarquee('50','down');

 

abraço

Share this post

Link to post
Share on other sites

programador php    0

programador php
Posted

opa!!!

 

estou com um probleminha!!!

 

como que eu faço para não esperar o tempo para de uma imagem para outra

 

por exemplo

 

meu codigo tem 20 imagens, ele passa as vinte normal,

 

mas o espaço que eu tenho é para imagens é de 5 ....

 

 

quando chega na 16 fica dando a impressão te que falta imagem (21)

 

de fato ela não existe

 

ai eu queria que ela aparecesse a imagem 1 novamente e repetisse o efeito

 

abraçoo

Share this post

Link to post
Share on other sites

brcontainer    16

brcontainer
Posted

Acho que entendi sua duvida é a mesma que de um colega meu quanto ao meu código

vou fazer o seguinte vou fazer um Update em breve, mas verei a melhor maneira de resolver

este problema.

Irei duplicar os elementos via JAVASCRIPT aguarde dois dias, na segunda eu posto

pois de domingo não estarei na internet

 

falow abraços

Share this post

Link to post
Share on other sites

programador php    0

programador php
Posted

Acho que entendi sua duvida é a mesma que de um colega meu quanto ao meu código

vou fazer o seguinte vou fazer um Update em breve, mas verei a melhor maneira de resolver

este problema.

Irei duplicar os elementos via JAVASCRIPT aguarde dois dias, na segunda eu posto

pois de domingo não estarei na internet

 

falow abraços

ok

 

mas se puder me dizer algo quem sabe posso fazer alguma coisinha!!!

 

abraço

Share this post

Link to post
Share on other sites

brcontainer    16

brcontainer
Posted

Adicionado EFEITO CONTINUO(para aparentar que a parte inicial se junta a parte final)

Corrigido o EFEITO RIGHT e o EFEITO DOWN

para tirar o efeito continuo elimine está linha:

Duplicar();

Share this post

Link to post
Share on other sites

Roots    0

Roots
Posted

Parabéns Silverfox o efeito está show!

 

Porém tenho uma dúvida, ñ tenho muito conhecimento em java mas já fucei o código e ñ consegui o resultado esperado.

 

Como faço p/colocar ele subindo ao invés de descendo?

 

Outra coisa, qndo ele começa o texto já está aparecendo, como fazer p/ele começar e o texto aparecer aos poucos?

muda aqui

 

Fmarquee('50','top');

 

 

por 

Fmarquee('50','down');

 

abraço

 

POis é Prohtamador php esse é o problema!

Essas alterações eu já tinha feito e ñ surtiram efeito algum!

 

segue abaixo o meu código:

 

<script type="text/javascript">

//<![CDATA[

var Rollar = "sim";

var roll = 0;

function Fmarquee(tmp,tipo){

var Marquee = document.getElementById("Marquee");

var Caixa = document.getElementById("caixa");

var Altura = Caixa.clientHeight;

roll++;

if(Altura==roll){

roll = (roll*-4);

roll = (roll+200);

}

if(roll == 175){

stopM();

setTimeout("playM()", 3000);

}

 

if(tipo == "top"){

Marquee.style.marginTop = roll+"px";

} else if (tipo == "down"){

Marquee.style.marginTop = roll+"px";

} else if (tipo == "left"){

Marquee.style.marginLeft = roll+"px";

} else if (tipo == "right"){

Marquee.style.marginRight = roll+"px";

}

 

if(Rollar == "sim"){

setTimeout("Fmarquee("+tmp+",'"+tipo+"')",tmp);

}

}

function playM(){

Rollar = "sim";

Fmarquee('50','down');

//setTimeout(code,millisec)

}

 

function stopM(){

Rollar = "nao";

}

 

function OnloadB(){

Rollar = "sim";

Fmarquee('50','down');

}

 

window.onload = OnloadB;

//]]>

</script>

 

Se puderem ajudar fico agradecido!

Share this post

Link to post
Share on other sites

brcontainer    16

brcontainer
Posted

Opa Roots eu atulizei o código foi um erro meu por isso não funicona mas está corrigido

é só copiar o novo.

Está no meu primeiro POSTE deste tópico

atualizado falow abraço ;)

Share this post

Link to post
Share on other sites

DKannel    0

DKannel
Posted

muito bom """ muito bom mesmo... deu uma ajuda legal.. mas apartir dai.. surgiu mais uma duvida... será q alguem poderia saná-la ??? é o seguinte... dentro deste mesmo efeito "marquee" seria possivel, por ex, ter 2 ou mais marquees??

 

explicando:

 

no meu efeito tem que acontecer o seguinte... a marquee tem a direção up (como se fosse as letras quando acaba um filme) e elas tem q atualizar a cada vez q acessar a página, sendo q uma hora é uma marquee.. e outra hora é outra marquee... mas aparecedo no mesmo lugar...

 

 

tenho a marquee na direção up, certo... e dentro dela tem algumas imagens e algumas partes escritas, vamos chamar de "A" ...

 

ai digamos que nós atualizamos a pagina, nessa atualização, deve aparecer outra marquee, no caso a "B"... com outro texto e imagens... mas no lugar q estava a primeira... como se fosse um sistema de banner rotativo...

 

ja tentei de tudo e não tenho explicação a isso..

 

"se alguem puder dar uma LUZ..

eu pago a conta",

valew..

hehehehe

Share this post

Link to post
Share on other sites

kklj    0

kklj
Posted

amigos nesse codigo ai como faço para ele mostrar mais de uma vez, ou seja, vou ter uma lista e ele vai exibir todos os codigos da lista.

 

obrigado

Share this post

Link to post
Share on other sites

brcontainer    16

brcontainer
Posted

amigos nesse codigo ai como faço para ele mostrar mais de uma vez, ou seja, vou ter uma lista e ele vai exibir todos os codigos da lista.

 

obrigado

Teria como ser mais expecifico, ponha uma screen de exmeplo, ou quem sabe um link

falow abraço ;)

Share this post

Link to post
Share on other sites
Go To Topic Listing Javascript
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.

  I accept