Marquee em JavaScript
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"](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.
Discussão (1)
Carregando comentários...