efeito marquee JS+CSS

hipnos na area · Novembro 22, 2007

[motivo dessa script] desuzo da TAG marquee(padrões W3C)

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

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

[atualizado]

adicionado EFEITO REPETIR (a ideia de Cido)

<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";/*Não Altere faz parte do EFEITO*/
var tipo = "left";/*Altere para usar as opções LEFT, RIGHT, TOP e DOWN*/
var roll = 0;/*Não Altere faz parte do EFEITO*/
var tmp = 29;/*Defina a velocidade aqui*/

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 = "não";
}

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>

se acaso alguém tiver um codigo melhor ou mais simples ou mais eficinte

posta ae ^^

o tópico esta aberto a discussões sobre melhoras no codigo

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

abraços...

Editado Março 17, 2008 por hipnos na area

Cido · Dezembro 20, 2007

opa fico muito bom seu efeito

so queria saber se tem como a medida que vai sumindo embaixo já ir reaparecendo em cima

pra não ficar aquele espaço em branco ate q u ultimo chegue la em baixo

vlws

hipnos na area · Dezembro 23, 2007

seria complicado isso por dois motivos =/

primeiro é que o efeito funciona assim, a uma barra de rolagem oculta o conteudo

vai deslizando(aumentando a margem superior aos poucos) para baixo em quando some

o margin-top recebe um valor negativo.

o segundo seria por que eu procuerei fazer indenticamente ao MARQUEE(é nem tanto assim hehehe)

mas há uma maneira de se fazer isso seria duplicar os objetos

em breve irei por sua sugestão

;)

hipnos na area · Março 17, 2008

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

BaYeR · Maio 27, 2008

ai so um apegunta de iniciante colok onde isso ai

hipnos na area · Junho 5, 2008

copia o código todo e põe em um novo arquivo de HTML, ;)

falow abraços

Junho 14, 2008

seria complicado isso por dois motivos =/
primeiro é que o efeito funciona assim, a uma barra de rolagem oculta o conteudo
vai deslizando(aumentando a margem superior aos poucos) para baixo em quando some
o margin-top recebe um valor negativo.
o segundo seria por que eu procuerei fazer indenticamente ao MARQUEE(é nem tanto assim hehehe)
mas há uma maneira de se fazer isso seria duplicar os objetos
em breve irei por sua sugestão
;)

jow · Junho 16, 2008

Opá cara muito bom bom o seu código parabéns eu estou utlizando ele em site q estou desenvolvendo, mas como eu faço para usar o marquee em uma linha ... As noticias uma do lado da outra ???

Editado Junho 16, 2008 por jow

jow · Junho 18, 2008

Bom dia, eu estava querendo fazer com q as noticias ficassem uma do lado da outra, depois de muito tentar resolver isso, não consegui nada, pois não sei quase nada de JS, mas vi q tem um CSS no código q influência no funcionamento, mas também não sei nada de CSS hehehe. Mas eu tinha q fazer de qualquer maneira q as noticias exibissem lado a lado, começei a mexer no código e piorar ele kkkkkkkk, mas de tanto mexer consegui resolver UPI, UPI kkkkkkk ... Só alterei o trecho do CSS

#marquee{
width:400px;
background:#ddd;
}

para

#marquee{
width:2000;
}

, ou seja almentei o tamanho da minha DIV marquee, e veja q não usei background:#ddd;, pois para a minha necessidade não foi necessário ... Abraçossss

hipnos na area · Outubro 10, 2008

Mas é isso mesmo, deve-se alterar o CSS conforne a necessidades ;)

Entrar

efeito marquee JS+CSS

Pergunta

hipnos na area

Link para o comentário

Compartilhar em outros sites

9 respostass a esta questão

Posts Recomendados

Cido

Link para o comentário

Compartilhar em outros sites

hipnos na area

Link para o comentário

Compartilhar em outros sites

hipnos na area

Link para o comentário

Compartilhar em outros sites

BaYeR

Link para o comentário

Compartilhar em outros sites

hipnos na area

Link para o comentário

Compartilhar em outros sites

Guest jhjh

Link para o comentário

Compartilhar em outros sites

jow

Link para o comentário

Compartilhar em outros sites

jow

Link para o comentário

Compartilhar em outros sites

hipnos na area

Link para o comentário

Compartilhar em outros sites

Participe da discussão

Estatísticas dos Fóruns

Navegação

Atividades