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


Moderador: web

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

Janela com barra de rolagem personalizada

03-02-2007 21:06

Você vai conhecer nesse artigo um script para mostrar uma janela com rolagem que tem uma barra de rolagem personalizada, onde podemos usar texto ou figura para rolar o conteúdo para cima ou para baixo.

Se desejar usar o script em mais de uma página, aconselho a usar iframe, veja abaixo como seria:

- Copie os códigos abaixo e salve como rolagem1.html, nessa página criada, configure seus textos, mantenha a posição do scroll;
- Crie outro documento chamado rolagem2.html, com o mesmo código, mas, com seu outro conteúdo;
Tendo como base a mesma largura de scroll mostrada no exemplo, coloque onde quer mostrar o primeiro scroll o seguinte:

<IFRAME SRC="rolagem1.html" MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=NO WIDTH=240 HEIGHT=200></IFRAME>

e onde quer mostrar o segundo scroll o seguinte:

<IFRAME SRC="rolagem2.html" MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=NO WIDTH=240 HEIGHT=200></IFRAME>

pronto, terá 2 scrolls rolando independentemente.

agora vamos o código, vou dividí-lo em algumas partes para você entender o que cada parte faz:

Parte 1
Aqui estão as funções usadas no script:

<script type="text/javascript" language="JavaScript"> function checkBrowser(){ this.ver=navigator.appVersion this.dom=document.getElementById?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; this.ie4=(document.all && !this.dom)?1:0; this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5) return this } bw=new checkBrowser() timSpeed=50 contHeight=100 function makeScrollObj(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; this.css = bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; this.height=bw.ns4?this.css.document.height:this.el.offsetHeight this.top=b_gettop return this } function b_gettop(){ var gleft=(bw.ns4 || bw.ns5) ? eval(this.css.top):eval(this.css.pixelTop); return gleft; } var scrollTim; var active=0; function scroll(speed){ clearTimeout(scrollTim) way=speed>0?1:0 if((!way && oScroll[active].top()>-oScroll[active].height+contHeight) || (oScroll[active].top()<0 && way)){ oScroll[active].css.top=oScroll[active].top()+speed scrollTim=setTimeout("scroll("+speed+")",timSpeed) } } function noScroll(){ clearTimeout(scrollTim) } function changeActive(num){ oScroll[active].css.visibility='hidden' active=num oScroll[active].css.top=0 oScroll[active].css.visibility='visible' } function scrollInit(){ oScroll=new Array() oScroll[0]=new makeScrollObj('divScroll1','divCont') oScroll[0].css.visibility='visible' oControl=new makeScrollObj('divControl') oControl.css.visibility='visible' } onload=scrollInit; </script>

Parte 2
Definimos aqui posição do scroll, cor de fundo e do texto
<style type="text/css"> #divControl{ position:absolute; left:10;top:150;width:201; visibility:hidden; } #divCont{ position:absolute;top:0;left:0;clip:rect(0,250,150,0);height:150;width:200; background-color:#fefefe; } .clScroll{ position:absolute;visibility:hidden; font-family:arial;font-size:8pt;color:#696969; } .thetext{ font-family:arial;font-size:8pt;color:#696969;text-decoration:none; } .thetabela{ font-family:arial;font-size:8pt;color:#696969;text-decoration:none; } </style>

Parte 3
Aqui ficam as divs onde terá os links para rolagem
<div style="position:absolute; left:205px; top:130px"> <a href="#" onmouseover="scroll(5)" onmouseout="noScroll()" class=thetext># baixo</a> </div> <div style="position:absolute; left:205px; top:2px"> <a href="#" onmouseover="scroll(-5)" onmouseout="noScroll()" class=thetext># cima</a> </div> <div id="divControl" style=""></div>

Parte 4
Aqui fica o conteúdo a ser rolado
<div id="divCont"><div id="divScroll1" class="clScroll"> <table border=0 align=center width=200> <tr><td class=thetabela align=center> Este é o texto da página 1<br> Este é o texto da página 1<br> Este é o texto da página 1<br> Este é o texto da página 1<br> Este é o texto da página 1<br> Este é o texto da página 1<br> Este é o texto da página 1<br> Este é o texto da página 1<br> Este é o texto da página 1<br> Este é o texto da página 1<br> </td></tr> </table> </div></div>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

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