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

Sheila_    0

Sheila_
Postado

Muito bom o código, parabéns.

 

Não sei muito sobre javascript e não encontrei soluição para alguns problemas...

 

1º Onde coloco ele para rodar as imagens mais rápido?

2º Coloquei 14 imagens, cuja as medidas de todas são: width="400" height="400", porém só rola até metade da 3ª imagem e reinicia.

3º Essa parte já mencionada de duplicar, tenho de alterar algo para funcionar? Copiei o código atualizado e continua seguindo o fundo quando começa ou acaba ou código.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sheila_    0

Sheila_
Postado

Muito bom o código, parabéns.

 

Não sei muito sobre javascript e não encontrei soluição para alguns problemas...

 

1º Onde coloco ele para rodar as imagens mais rápido?

2º Coloquei 14 imagens, cuja as medidas de todas são: width="400" height="400", porém só rola até metade da 3ª imagem e reinicia.

3º Essa parte já mencionada de duplicar, tenho de alterar algo para funcionar? Copiei o código atualizado e continua seguindo o fundo quando começa ou acaba ou código.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ThiagoInfo    1

ThiagoInfo
Postado

Muito bom o código, parabéns.

 

Não sei muito sobre javascript e não encontrei soluição para alguns problemas...

 

1º Onde coloco ele para rodar as imagens mais rápido?

2º Coloquei 14 imagens, cuja as medidas de todas são: width="400" height="400", porém só rola até metade da 3ª imagem e reinicia.

3º Essa parte já mencionada de duplicar, tenho de alterar algo para funcionar? Copiei o código atualizado e continua seguindo o fundo quando começa ou acaba ou código.

Eu consegui um outro que funciona rolando direito, uso em um site, porém acho que teria que melhor adaptar, caso não tiver js habilitado, como estou sem tempo:

var sliderwidth='960px';  //largura
var sliderheight='132px'; //Altura
var slidespeed=1;	//Velocidade
var slidebgcolor='#EAEAEA'; //Cor de fundo
var leftrightslide=new Array();
var finalslide='';
// Array com intens a serem exibidos
leftrightslide[0]='<a id="slide-1" href="./img/slide/slide-1.jpg" title="Ampliar" class="highslide" onclick="return hs.expand(this);"><img src="./img/slide/slide-1.jpg" alt="foto"></a>';
leftrightslide[1]='<a id="slide-2" href="./img/slide/slide-2.jpg" title="Ampliar" class="highslide" onclick="return hs.expand(this);"><img src="./img/slide/slide-2.jpg" alt="foto"></a>';
leftrightslide[2]='<a id="slide-3" href="./img/slide/slide-3.jpg" title="Ampliar" class="highslide" onclick="return hs.expand(this);"><img src="./img/slide/slide-3.jpg" alt="foto"></a>';
leftrightslide[3]='<a id="slide-4" href="./img/slide/slide-4.jpg" title="Ampliar" class="highslide" onclick="return hs.expand(this);"><img src="./img/slide/slide-4.jpg" alt="foto"></a>';
leftrightslide[4]='<a id="slide-5" href="./img/slide/slide-5.jpg" title="Ampliar" class="highslide" onclick="return hs.expand(this);"><img src="./img/slide/slide-5.jpg" alt="foto"></a>';
leftrightslide[5]='<a id="slide-6" href="./img/slide/slide-6.jpg" title="Ampliar" class="highslide" onclick="return hs.expand(this);"><img src="./img/slide/slide-6.jpg" alt="foto"></a>';
leftrightslide[6]='<a href="index.php?act=contato" title="Contato"><img src="./img/slide/shows.jpg" alt="Contato"></a>';
var imagegap=' ';
var slideshowgap=10;
////NO NEED TO EDIT BELOW THIS LINE////////////

var copyspeed=slidespeed;
leftrightslide='<nobr>'+leftrightslide.join(imagegap)+'</nobr>';
var iedom=document.all||document.getElementById;
if (iedom)
{
	document.write('<span id=temp style=visibility:hidden;position:absolute;top:-100px;left:-9000px>'+leftrightslide+'</span>')
}
var actualwidth='';
var cross_slide, ns_slide;

function fillup(){
if (iedom)
{
cross_slide=document.getElementById? document.getElementById('test2') : document.all.test2
cross_slide2=document.getElementById? document.getElementById('test3') : document.all.test3
cross_slide.innerHTML=cross_slide2.innerHTML=leftrightslide
actualwidth=document.all? cross_slide.offsetWidth : document.getElementById('temp').offsetWidth
cross_slide2.style.left=actualwidth+slideshowgap+'px'
}
else if (document.layers){
ns_slide=document.ns_slidemenu.document.ns_slidemenu2
ns_slide2=document.ns_slidemenu.document.ns_slidemenu3
ns_slide.document.write(leftrightslide)
ns_slide.document.close()
actualwidth=ns_slide.document.width
ns_slide2.left=actualwidth+slideshowgap
ns_slide2.document.write(leftrightslide)
ns_slide2.document.close()
}
lefttime=setInterval('slideleft()',30)
}

attachOnLoadEvent(fillup);

////window.onload=fillup

function slideleft(){
if (iedom){
if (parseInt(cross_slide.style.left)>(actualwidth*(-1)+8))
cross_slide.style.left=parseInt(cross_slide.style.left)-copyspeed+'px'
else
cross_slide.style.left=parseInt(cross_slide2.style.left)+actualwidth+slideshowgap+'px'

if (parseInt(cross_slide2.style.left)>(actualwidth*(-1)+8))
cross_slide2.style.left=parseInt(cross_slide2.style.left)-copyspeed+'px'
else
cross_slide2.style.left=parseInt(cross_slide.style.left)+actualwidth+slideshowgap+'px'

}
else if (document.layers){
if (ns_slide.left>(actualwidth*(-1)+8))
ns_slide.left-=copyspeed
else
ns_slide.left=ns_slide2.left+actualwidth+slideshowgap

if (ns_slide2.left>(actualwidth*(-1)+8))
ns_slide2.left-=copyspeed
else
ns_slide2.left=ns_slide.left+actualwidth+slideshowgap
}
}


if (iedom||document.layers){
with (document){
if (iedom){
write('<div style=position:relative;width:'+sliderwidth+';height:'+sliderheight+';overflow:hidden>')
write('<div style=position:absolute;width:'+sliderwidth+';height:'+sliderheight+';background-color:'+slidebgcolor+' onMouseover=copyspeed=0 onMouseout=copyspeed=slidespeed>')
write('<div id=test2 style=position:absolute;left:0px;top:0px></div>')
write('<div id=test3 style=position:absolute;left:-1000px;top:0px></div>')
write('</div></div>')
}
else if (document.layers){
write('<ilayer width='+sliderwidth+' height='+sliderheight+' name=ns_slidemenu bgColor='+slidebgcolor+'>')
write('<layer name=ns_slidemenu2 left=0 top=0 onMouseover=copyspeed=0 onMouseout=copyspeed=slidespeed></layer>')
write('<layer name=ns_slidemenu3 left=0 top=0 onMouseover=copyspeed=0 onMouseout=copyspeed=slidespeed></layer>')
write('</ilayer>')
}
}
}

coloque em um arquivo js e chame no lugar que quer que apareça..

 

function attachOnLoadEvent(f)
{   
   
	var old = window.onload
	if (typeof old != 'function')
	   {
		  window.onload = f;
	   }
	else 
	   {
		  window.onload = function() { old(); f() }
	   }
}

Esse acima tem que ser chamado no inicio, é onload, pra chamar a função...

 

Depois vou melhorar ele quando der tempo..

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Eu consegui um outro que funciona rolando direito,

o meu tambem funciona rolando direto e é bem mais limpo que o seu código.

Desculpa a sinceridade, mas com o meu você pode alterar a estrutura pelo CSS facilmente.

 

Alem do mais o meu código funciona lendo o HTML então se o navegador não possuir JAVASCRIPT habilitado os itens irão aparecer do mesmo jeito.

Compartilhar este post

Link para o post
Compartilhar em outros sites

ThiagoInfo    1

ThiagoInfo
Postado

Eu consegui um outro que funciona rolando direito,

o meu tambem funciona rolando direto e é bem mais limpo que o seu código.

Desculpa a sinceridade, mas com o meu você pode alterar a estrutura pelo CSS facilmente.

 

Alem do mais o meu código funciona lendo o HTML então se o navegador não possuir JAVASCRIPT habilitado os itens irão aparecer do mesmo jeito.

 

Inicialmente eu testei o seu código, ele funciona perfeitamente como o marquee original do html, assim que termina de rolar tudo aparece do outro lado, porém eu precisei de uma solução que não tivesse esse intervalo, cheguei a testar o exemplo que você colocou sem intervalo, mas não funcionou.

 

Seu código realmente está mais limpo e momento algum questionei, pelo contrário disse que era melhor, porém o único que funcionou como precisa foi o código que postei acima, que precisa apenas de atualização e adaptações.

 

Se tiver um exemplo do seu código funcionando sem intervalo, gostaria de ver, pois realmente pra mim não funcionou, assim como muitos também disseram que não.

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

você adicionou no meu código a funcão Duplicar(); ela que faz o efeito continuo??

 

assim:

window.onload = function(){
	Rollar = "sim";
	Fmarquee();
	Duplicar();
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

ThiagoInfo    1

ThiagoInfo
Postado

você adicionou no meu código a funcão Duplicar(); ela que faz o efeito continuo??

 

assim:

window.onload = function(){
	Rollar = "sim";
	Fmarquee();
	Duplicar();
}
Sim na epóca eu coloquei e dava uns problemas estranhos.

 

Agora testei novamente aqui e olha os problemas:

1 - Ele realmente não fica continuo, como no que postei, mesmo com a função duplicar.

2 - Eu coloquei seis imagens e eles só exibe as 3 primeiras.

 

Eu testei igual está aí e o comportamento não foi como no código que postei.

 

Qualquer coisa entra no www.nilsonfreire.com

 

e olha no rodapé como que fica....

 

Depois vê se tem como tirar alguma coisa útil do código que postei, pra fazer ficar daquele jeito, aí fica perfeito.

 

Abraço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Sheila_    0

Sheila_
Postado

E como altero o CSS de modo que fique compativel ao efeito que quero? Tipo, continuo e que rodem todas as 15 figuras e não apenas 03?

 

Alguém pode me ajudar?

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Boa noite,

 

Este feito não é possível ser utilizado com banner em flash(.swf)?

 

Se for setado o Doctype do documento o script não trabalha corretamente.

 

<!DOCTYPE html 
	 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
Poderia por um link, amigo no SWF use o parametro WMODE="transparente",

Adicione este PARAM:

<param name="wmode" value="Transparent">

e na TAG EMBED faça isso:

<embed ... wmode="transparent">

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gelado    0

Gelado
Postado

eu usei esse codigo para uma tabela só que não mostra tudo, depois de umas 9 imagens volta para o começo.

por favor me ajudem.

 

<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{
width:600px;
height:230px;
overflow:hidden;
}
#marquee{
width:400px;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var Rollar = "sim";
var tipo = "left";
var roll = 0;
var tmp = 1;

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*-2)+"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">
<table width="100%"  border="0" bgcolor="#000000">
<tr>
<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="p_0001.html"><img src="img/cursos/p_0001.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>APH – Atendimento Pré<br> Hospitalar ( Formação<br> Socorrista)</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="p_0002.html"><img src="img/cursos/p_0002.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Curso APH – Atendimento<br> Pré-Hospitalar Pediátrico a<br> Adulto (Primeiros Socorros)</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="p_0003.html"><img src="img/cursos/p_0003.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center" height="50" valign="top"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>IBS - Intensive Basic Support)<br>
			Manuseio do DEA</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="p_0004.html"><img src="img/cursos/p_0004.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center" height="50" valign="top"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Bombeiro Civil /Industrial</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="p_0005.html"><img src="img/cursos/p_0005.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Segurança em Instalações e<br> Serviços com Eletricidade NR<br> 10</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0006.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Espaços Confinados<br> 
	  Segurança e Saúde<br>
	  Supervisores - Autorizados e<br> Vigias NR  33</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0007.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Trabalho em Altura  NR 18 </strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0008.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>DEA (Desfibrilador Externo<br> Automático)</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0009.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Caldeiras   e  Vasos de Pressão -<br> 
	  Segurança e Operação  NR 13</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0010.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>A.I.P.   -  Atendimento Inicial ao<br>Poli traumatizado (Avançado)</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0011.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Fornos  - Segurança e<br>Operação NR 14</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>
<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0012.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>CIPA  NR 05</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0013.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Ergonomia NR 17</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0014.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Direção Defensiva<br>(Treinamento Assistido) NR 11</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0015.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Plano de Abandono de<br>Edificações</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0016.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Operador de Empilhadeira  -  NR<br>11  e NR 12</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0017.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Operador de Ponte Rolante -<br> NR 11  e NR 12</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0018.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Operador de Retro Escavadeira<br>
	   NR 11  e NR 12</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0019.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Brigada de Incêndios in<br> 
	  Company (Treinamento<br>
	  Assistido)</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0020.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Salvamento e Resgate<br>Aquático</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0021.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Resíduos industriais NR 25</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0022.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Mineração Segurança e Saúde<br>  
	  NR 22</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0023.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Treinamento  da Brigada de<br>
	  Incêndios em Nosso Campo<br>
	  NR 23</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0024.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>EPI´s  e  EPC´s NR 6</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0025.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>PCMSO	NR 7</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0026.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>PPRA NR 9</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0027.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Projetos e Sistemas Contra<br>
	  Incêndios e Raios</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0028.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Transporte, Movimentação,<br>Armazenagem e Manuseio de<br>Materiais NR 11</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0029.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Máquinas e Equipamentos<br>
	  NR 12</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0030.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Operador de Guindaste</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0031.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Formação de Riggers</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0032.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Estabilização de Taludes <br>
	  Prevenção de Riscos NR 18</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0033.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Atividades e Operações<br>
	  insalubres NR 15</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0034.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Atividades e Operações<br>Perigosas -  NR 16</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0035.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>PCMAT - Trabalho em Altura<br>
	  NR 18</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0036.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Explosivos NR 19</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0037.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Líquidos Combustíveis e Inflamáveis NR 20</strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

<td valign="top">
<table width="200" border="0">
  <tr>
	<td>
<table width="200" border="0">
  <tr>
	<td><a href="#"><img src="img/cursos/p_0038.jpg" width="200" height="150"/></a></td>
  </tr>
  <tr>
	<td align="center"><font face="Arial, Helvetica, sans-serif" color="#FFFFFF" style="font-size:10pt"><strong>Soluções Integradas para<br>Prevenção de Acidentes<br>
	  Ambientais NR 9 </strong></font></td>
  </tr>
</table>
</td>
  </tr>
</table>
</td>

</tr>
</table>
	</div>
  </div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

eu usei esse codigo para uma tabela só que não mostra tudo, depois de umas 9 imagens volta para o começo.

por favor me ajudem.

Altere o CSS mude o HEIGHT e WIDTH conforme o necessario. ;)

 

Como eu disse esse script mescla CSS e JS, portanto para cada aplicação é necessario alterar o CSS e as vezes o JS.

 

Abraços

Compartilhar este post

Link para o post
Compartilhar em outros sites

Gelado    0

Gelado
Postado

eu usei esse codigo para uma tabela só que não mostra tudo, depois de umas 9 imagens volta para o começo.

por favor me ajudem.

Altere o CSS mude o HEIGHT e WIDTH conforme o necessario. ;)

 

Como eu disse esse script mescla CSS e JS, portanto para cada aplicação é necessario alterar o CSS e as vezes o JS.

 

Abraços

 

eu tentei agora mudar no CSS

 

#marquee{
width:2000px;
}

mas não mudou nada =/

Compartilhar este post

Link para o post
Compartilhar em outros sites

brcontainer    16

brcontainer
Postado

Talvez por que você esteja usando WIDTH=100% 

<div id="Marquee">
<table width="100%"  border="0" bgcolor="#000000">

Coloque uma largura FIXA na tabela. Tipo 2000 tambem, ou mude conforme o necessario.

Bem realmente para muitos esse sistema esta dificil de aplicar, estou criando uma serie de BIBLIOTECAS em JS para EXPOR no meu site pessoal(que em breve estará no AR) e estou fazendo um novo sistema de MARQUEE em JS que irá usa propriedades do JS como clientWidth, clientHeight, parentNode, para a pessoa não necessitar alterar o CSS pois o JS fará isso. Como aqui não é area de divulgação assim que terminar lhe mando um MP e divulgo na area certa do FORUM. ;)

 

[3/6/09 - editado] Olha amigo enquanto não faço um novo MARQUEE em JS, a ideia para você arrumar é essa, primeiro não use elementos dentro do DIV com 100%, use uma largura FIXA, depois veja só você tem 37 fotos(foi o que eu contei) e cada TABELA que estas fotos estão tem 200 PIXELS de largura, então faremos 200 VEZES 37 (200*37) que será largura vezes quantidade, e teremos um total de 7400, este valor deve ser o valor deste local:

 

De assim:

<div id="Marquee">
<table width="100%"  border="0" bgcolor="#000000">

Deve ficar assim:

<div id="Marquee">
<table width="7400"  border="0" bgcolor="#000000">

e o CSS deve ser algo assim:

#marquee{
width:250px;/*Altere conforme o necessario*/
}
Não testei por que estou trabalhando muito e frequento muito pouco atualmente o forum, mas assim que chegar minha folga eu vejo se deu tudo certo, testa ae e me diga se funcionou.

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