Efeito marquee CSS+JS
[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">#caixa{
background:#fc0;
width:600px;
height:100px;
overflow:hidden;
}
#marquee{
width:400px;
background:#ddd;
}</style>
<script type="text/javascript">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>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]
Discussão (35)
Carregando comentários...