Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

brcontainer

Efeito marquee CSS+JS

Por , em Javascript

Recommended Posts

brcontainer    16

brcontainer
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

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>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Roots    0

Roots
Postado

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?

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

programador php    0

programador php
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

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();

Compartilhar este post

Link para o post
Compartilhar em outros sites

Roots    0

Roots
Postado

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!

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

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 ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites

DKannel    0

DKannel
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

kklj    0

kklj
Postado

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

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

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 ;)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito