Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Avatar do usuário
ADMIN
ADMIN
Tópico Autor
Mensagens: 17513
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Scroll contínuo horizontal

12-09-2007 21:06

Esse é um script, onde você pode colocar textos ou figuras de forma a rolarem em um scroll horizontal de forma contínua sem espaço, diferente de um marquee.

O script está pré-configurado, caso seja necessário mudar, use o CSS.

PARTE EM JAVASCRIPT
<script type="text/javascript"> function scrolling(ulId, speed) { this.container = document.getElementById(ulId); this.container.Scroller = this; this.speed = speed; this.scroll = function() { var c = this.container.firstChild; var first = null; while (c) { if (c.tagName == 'LI') { first = c; break; } c = c.nextSibling; } var nodeSize = 80; var px = 0; nodeSize = first.clientWidth; if (first.style.marginLeft != '') { px = parseInt(first.style.marginLeft); } first.style.marginLeft = ( px - 1 ) + 'px'; if ( parseInt(first.style.marginLeft) <= -(nodeSize) ) { first.style.marginLeft = '0px'; this.container.removeChild(first); this.container.appendChild(first); } setTimeout('document.getElementById(\'' + this.container.id + '\').Scroller.scroll()', this.speed); } setTimeout('document.getElementById(\'' + ulId + '\').Scroller.scroll()', this.speed); } </script>

PARTE EM CSS
<style> .scrolling_logos { PADDING-RIGHT: 15px; PADDING-LEFT: 15px; PADDING-BOTTOM: 11px; PADDING-TOP: 11px } #scroller { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; OVERFLOW: hidden; WIDTH: 870px; PADDING-TOP: 0px; LIST-STYLE-TYPE: none; HEIGHT: 43px; TEXT-ALIGN: center } /* abaixo é a base para cada li */ #scroller LI { PADDING-RIGHT: 3px; PADDING-LEFT: 3px; FLOAT: left; PADDING-BOTTOM: 3px; MARGIN: 0px; WIDTH: 85px; PADDING-TOP: 3px; HEIGHT: 43px } #scroller LI IMG { PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px } </style>

PARTE EM HTML
<div class="scrolling_logos"> <UL id="scroller"> <LI>FIGURA 1</LI> <LI>FIGURA 2</LI> <LI>FIGURA 3</LI> <LI>FIGURA 4</LI> <LI>FIGURA 5</LI> <LI>FIGURA 6</LI> <LI>FIGURA 7</LI> <LI>FIGURA 8</LI> <LI>FIGURA 9</LI> <LI>FIGURA 10</LI> <LI>FIGURA 11</LI> <LI>FIGURA 12</LI> <LI>FIGURA 13</LI> <LI>FIGURA 14</LI> <LI>FIGURA 15</LI> </UL> <script type="text/javascript"> scrolling('scroller', 60, 'horizontal'); </script> </div>

Obs.: Para fazer o scroll parar ao passar o cursor, e continuar ao tirar, basta colocar essa div no lugar da atual.
<div class="scrolling_logos" onmouseover="scrolling('scroller', 100000, 'horizontal');" onmouseout="scrolling('scroller', 60, 'horizontal');">

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Nenhum usuário registrado