Marquee em JavaScript

klonder · Outubro 10, 2009

Olá a todos!

Em virtude da dificuldade que tive em arrumar bons marquees em JavaScript, resolvi criar um marquee por conta própria, utilizando JavaScript puro e um pouco de CSS.

Temos aqui no fórum um tópico que já fala sobre o assunto:

http://forum.imasters.com.br/index.php?/topic/258807-efeito-marquee-css-js/

Entretanto, o marquee do link acima apresentou um pequeno bug (tremida) quando o ponteiro do mouse passa de uma imagem para outra. O funcionamento está excelente, porém, ficaria melhor sem esse discreto problema.

Minha opinião: Acho excelente a funcionalidade da tag <marquee>. Não consigo compreender porque a "implicância" da W3C com ela, pois ela é simples, prática e possui eventos flexíveis. Acho uma enorme perda seu desuso!

Estamos ainda na versão 1.0 (vertical), mas irei melhorar o código e criar novas funcionalidades, quando tiver mais tempo.

O código já está comentado:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Klonder - Marquee em JavaScript</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
body {
margin-top: 20px;
margin-left:20px;
}
#baseMarquee{
 	position:relative;
	background:#222;
	width:120px;
	height:300px;
	overflow:hidden;
	padding: 0;
	border:0;
}
#motionMarquee{
	width:100px;
	margin-left: 10px;
	border:0;
}
div.Marquee {width:100px; height:100px; border:0; margin:0; float:left; background:#DCDCDC}
img.imgMotion {width:100px; height:100px; border:0; }
</style>
<script type="text/javascript">
/*
Marquee em JavaScript (Versão 1.0b - 10/09)
Script desenvolvido por Klonder (Moderador da área de JavaScript do fórum iMasters).

Características: 
JavaScript puro, sem frameworks;
Disposição: vertical;
Direção de rolagem: para cima;
Loop infinito: SIM;
Pausa com mouseover: SIM.
Botões de controle: NÃO.

Postagem exclusiva em: www.forum.imasters.com.br
*/
var quantExibida = 4;
var pausa = false;

//Criando uma variável-controle para saber qual será o primeiro índice da sequência atual.
//Varia conforme a sequência em vigor;
//Exemplo: Primeira sequência: [0]123; 2ª: [1]234; 3ª: [2]345...
var iFirst = 0;

//Local das imagens e caminho dos links:
var linha = new Array();
linha[0] = "<div class='Marquee'><a href=''><img src='img001.jpg' class='imgMotion'></a></div>";
linha[1] = "<div class='Marquee'><a href=''><img src='img002.jpg' class='imgMotion'></a></div>";
linha[2] = "<div class='Marquee'><a href=''><img src='img003.jpg' class='imgMotion'></a></div>";
linha[3] = "<div class='Marquee'><a href=''><img src='img004.jpg' class='imgMotion'></a></div>";
linha[4] = "<div class='Marquee'><a href=''><img src='img005.jpg' class='imgMotion'></a></div>";
linha[5] = "<div class='Marquee'><a href=''><img src='img006.jpg' class='imgMotion'></a></div>";
linha[6] = "<div class='Marquee'><a href=''><img src='img007.jpg' class='imgMotion'></a></div>";
linha[7] = "<div class='Marquee'><a href=''><img src='img008.jpg' class='imgMotion'></a></div>";


function FormarDiv(){
var iAtual = 0;
var Marquee = document.getElementById("motionMarquee"); 
var extra = 0;
var DivFormada = "";
/*
Fórmula para saber qual o índice atual (iAtual):
iAtual = iFirst + i (Primeiro índice + soma do ciclo);

Caso essa soma seja maior do que o valor máximo dos índices,
irei adicionar um índice <extra>.
Exemplo: Se a sequência atual iniciasse com iFirst = 6, então:
[6] 7 <0>; Se iFirst fosse 7, teríamos: [7] <0> <1>;

Como a variável <extra> está dentro da função, sempre irá começar por 0 (zero):
*/	

	//Zerando o valor do primeiro índice, caso exceda o valor máximo de índices:	
	if (iFirst >= linha.length) {
		iFirst = 0;
	}
	
	//Criando a sequências de índices que serão exibidos no DIV atual:
	for (var i=0; i<quantExibida; i++) {
		if ((iFirst + i) >= linha.length) {
		 	//<extra> irá assumindo, em sequência, os valores: <0>, <1>, <2>, <3>...
			iAtual = extra;
			extra++;	
		} else {
			iAtual = iFirst + i;
		}
		//Criando os objetos da div atual em sequência:
		DivFormada += linha[iAtual];
	}
	iFirst++; //Acrescentando 1 ao iFirst para reutilizá-lo na próxima sequência:
	Marquee.innerHTML = DivFormada; //Jogando a sequência atual dentro do DIV;
	pausa = true; //Criando uma pausa; Se "Pausa != true" -----> "stop";
	moveMarquee(); //Chamando a função moveMarquee, para mover o div que acabou de ser criado.
}

//Criando uma variável para controlar a posição do <div id=motionMarquee>:
var pos = 0;

//Função responsável pela animação do Marquee:
function moveMarquee(){
//Localizando os objetos:
var Caixa = document.getElementById("baseMarquee");
var Marquee = document.getElementById("motionMarquee");
	
	pos+=2;

//Se pos assumir o valor = 100, iremos zerá-lo e chamar a função FormarDIV()
//para criar outro grupo de divs:
	if (pos>=100) { 
	 pos = 0;
	 FormarDiv();
	
	//Caso contrário, prosseguiremos com chamadas à função moveMarquee();
	} else {
		Marquee.style.marginTop = ((-1)*pos)+"px";
		if (pausa == false) {
			tempoPausa = setTimeout("moveMarquee()",20);
		} else {
			tempoPausa = setTimeout("moveMarquee()",2000);
			pausa = false;	
		}
	}
	
}
window.onload = FormarDiv;
</script>

</head>
<body>
<div id="baseMarquee" >
	<div id="motionMarquee" onmouseover="clearInterval(tempoPausa)" onmouseout="tempoPausa = setTimeout('moveMarquee()',100);"></div>
</div>

</body>
</html>

Testado no IE7, Chrome e Firefox.

klonder · Outubro 10, 2009

Versão em formato horizontal:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br" lang="pt-br">
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>Klonder - Marquee em JavaScript (horizontal)</title>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<style type="text/css">
* {
margin:0;
padding:0;
list-style:none;
}
body {
margin-top: 20px;
margin-left:20px;
}
#baseMarquee{
 	position:relative;
	background:#222;
	width:298px;
	height:120px;
	overflow:hidden;
	padding: 0;
	border:0;
}
#motionMarquee{
	width:600px;
	height:120px;
	margin: 10px 0 0 0;
	border:0;
}
div.Marquee {width:100px; height:100px; border:0; margin:0; float:left; background:#DCDCDC}
img.imgMotion {width:100px; height:100px; border:0; }
</style>
<script type="text/javascript">
/*
Marquee em JavaScript (Versão 1.0b - 10/09)
Script desenvolvido por Klonder (Moderador da área de JavaScript do fórum iMasters).

Características: 
JavaScript puro, sem frameworks;
Disposição: horizontal;
Direção de rolagem: para a esquerda;
Loop infinito: SIM;
Pausa com mouseover: SIM.
Botões de controle: NÃO.

Postagem exclusiva em: www.forum.imasters.com.br
*/
var quantExibida = 4;
var pausa = false;

//Criando uma variável-controle para saber qual será o primeiro índice da sequência atual.
//Varia conforme a sequência em vigor;
//Exemplo: Primeira sequência: [0]123; 2ª: [1]234; 3ª: [2]345...
var iFirst = 0;

//Local das imagens e caminho dos links:
var linha = new Array();
linha[0] = "<div class='Marquee'><a href=''><img src='img001.jpg' class='imgMotion'></a></div>";
linha[1] = "<div class='Marquee'><a href=''><img src='img002.jpg' class='imgMotion'></a></div>";
linha[2] = "<div class='Marquee'><a href=''><img src='img003.jpg' class='imgMotion'></a></div>";
linha[3] = "<div class='Marquee'><a href=''><img src='img004.jpg' class='imgMotion'></a></div>";
linha[4] = "<div class='Marquee'><a href=''><img src='img005.jpg' class='imgMotion'></a></div>";
linha[5] = "<div class='Marquee'><a href=''><img src='img006.jpg' class='imgMotion'></a></div>";
linha[6] = "<div class='Marquee'><a href=''><img src='img007.jpg' class='imgMotion'></a></div>";
linha[7] = "<div class='Marquee'><a href=''><img src='img008.jpg' class='imgMotion'></a></div>";


function FormarDiv(){
var iAtual = 0;
var Marquee = document.getElementById("motionMarquee"); 
var extra = 0;
var DivFormada = "";
/*
Fórmula para saber qual o índice atual (iAtual):
iAtual = iFirst + i (Primeiro índice + soma do ciclo);

Caso essa soma seja maior do que o valor máximo dos índices,
irei adicionar um índice <extra>.
Exemplo: Se a sequência atual iniciasse com iFirst = 6, então:
[6] 7 <0>; Se iFirst fosse 7, teríamos: [7] <0> <1>;

Como a variável <extra> está dentro da função, sempre irá começar por 0 (zero):
*/	

	//Zerando o valor do primeiro índice, caso exceda o valor máximo de índices:	
	if (iFirst >= linha.length) {
		iFirst = 0;
	}
	
	//Criando a sequências de índices que serão exibidos no DIV atual:
	for (var i=0; i<quantExibida; i++) {
		if ((iFirst + i) >= linha.length) {
		 	//<extra> irá assumindo, em sequência, os valores: <0>, <1>, <2>, <3>...
			iAtual = extra;
			extra++;	
		} else {
			iAtual = iFirst + i;
		}
		//Criando os objetos da div atual em sequência:
		DivFormada += linha[iAtual];
	}
	iFirst++; //Acrescentando 1 ao iFirst para reutilizá-lo na próxima sequência:
	Marquee.innerHTML = DivFormada; //Jogando a sequência atual dentro do DIV;
	pausa = true; //Criando uma pausa; Se "Pausa != true" -----> "stop";
	moveMarquee(); //Chamando a função moveMarquee, para mover o div que acabou de ser criado.
}

//Criando uma variável para controlar a posição do <div id=motionMarquee>:
var pos = 0;

//Função responsável pela animação do Marquee:
function moveMarquee(){
//Localizando os objetos:
var Caixa = document.getElementById("baseMarquee");
var Marquee = document.getElementById("motionMarquee");
	
	pos+=2;

//Se pos assumir o valor = 100, iremos zerá-lo e chamar a função FormarDIV()
//para criar outro grupo de divs:
	if (pos>=100) { 
	 pos = 0;
	 FormarDiv();
	
	//Caso contrário, prosseguiremos com chamadas à função moveMarquee();
	} else {
		Marquee.style.marginLeft = ((-1)*pos)+"px";
		if (pausa == false) {
			tempoPausa = setTimeout("moveMarquee()",20);
		} else {
			tempoPausa = setTimeout("moveMarquee()",2000);
			pausa = false;	
		}
	}
	
}
window.onload = FormarDiv;
</script>

</head>
<body>
<div id="baseMarquee" >
	<div id="motionMarquee" onmouseover="clearInterval(tempoPausa)" onmouseout="tempoPausa = setTimeout('moveMarquee()',100);"></div>
</div>

</body>
</html>

Entrar

Arquivado

Marquee em JavaScript

Recommended Posts

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

klonder 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carregamento preloading

Consulta SQL dentro de outra consulta

problema em usar json para realizar engenharia de dados

Este projeto é apoiado pelas empresas

Fóruns

Tempo Real

Informação importante