Ir para conteúdo
Fórum Script Brasil
  • 0

Barra De Rolagem Horizontal


wawasurf

Pergunta

Olá

Tenho um código aqui que faz uma barra de rolagem em javascript com imagens, só que ele está na vertical ( | ) , queria saber se tem como fazer essa mesma barra de rolagem na horinzonta ( - ). Estou fazendo um album de fotos e quero mostrar as fotos na horizontal com um barra de rolagem personalizada com imagens usando jascritpt.

Meu coódigo:

<html>
<head>
<title>Rich Edit Component (WebFX)</title>
</head>
<body>

<style type="text/css">
#divUp  {position:absolute; left:170px; top:190px;}
#divDown {position:absolute; left:170px; top:380px;}
#divScrollTextCont {position:absolute; left:170px; top:220px;
width:426px; height:158px; clip:rect(0px 447px 221px 0px); overflow:hidden;}
#divText {position:absolute; left:700px; top:0px;}

.FormObjects
{
    COLOR: #000000;
    FONT-FAMILY: Verdana, Arial, Helvetica, sans-serif;
    FONT-SIZE: 7pt;
    FONT-STYLE: normal;
    FONT-WEIGHT: normal
}

</style>

<script language="JavaScript" type="text/javascript">
function lib_bwcheck(){ //Browsercheck (needed)
this.ver=navigator.appVersion
this.agent=navigator.userAgent
this.dom=document.getElementById?1:0
this.opera5=(navigator.userAgent.indexOf("Opera")>-1 && document.getElementById)?1:0
this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom && !this.opera5)?1:0;
this.ie6=(this.ver.indexOf("MSIE 6")>-1 && this.dom && !this.opera5)?1:0;
this.ie4=(document.all && !this.dom && !this.opera5)?1:0;
this.ie=this.ie4||this.ie5||this.ie6
this.mac=this.agent.indexOf("Mac")>-1
this.ns6=(this.dom && parseInt(this.ver) >= 5) ?1:0;
this.ns4=(document.layers && !this.dom)?1:0;
this.bw=(this.ie6 || this.ie5 || this.ie4 || this.ns4 || this.ns6 || this.opera5)
return this
}
var bw=new lib_bwcheck()

var speed = 30

var loop, timer

function makeObj(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.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight
this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight
this.up=goUp;this.down=goDown;
this.moveIt=moveIt; this.x=0; this.y=0;
    this.obj = obj + "Object"
    eval(this.obj + "=this")
    return this
}

var px = bw.ns4||window.opera?"":"px";

function moveIt(x,y){
this.x = x
this.y = y
this.css.left = this.x+px
this.css.top = this.y+px
}

function goDown(move){
if (this.y>-this.scrollHeight+oCont.clipHeight){
  this.moveIt(0,this.y-move)
  if (loop) setTimeout(this.obj+".down("+move+")",speed)
}
}
function goUp(move){
if (this.y<0){
  this.moveIt(0,this.y-move)
  if (loop) setTimeout(this.obj+".up("+move+")",speed)
}
}

function scroll(speed){
if (scrolltextLoaded){
  loop = true;
  if (speed>0) oScroll.down(speed)
  else oScroll.up(speed)
}
}

function noScroll(){
loop = false
if (timer) clearTimeout(timer)
}
var scrolltextLoaded = false
function scrolltextInit(){
oCont = new makeObj('divScrollTextCont')
oScroll = new makeObj('divText','divScrollTextCont')
oScroll.moveIt(0,0)
oCont.css.visibility = "visible"
scrolltextLoaded = true
}
if (bw.bw) onload = scrolltextInit

</script>

  <div align="right"><a href="#" onMouseOver="scroll(-2)" onMouseOut="noScroll()" onClick="return false"><img src="../../cima.gif" width="12" height="6" >
    </a> </div>
</div>
<div id="divScrollTextCont" style="left: 317px; top: 150px; width: 447px; height: 221px">
  <div id="divText" style="" >
    <p align=justify> <font face="Verdana, Arial, Helvetica, sans-serif" size="2">
      <b>TESTE DE SCROLL AUTOMATICO</b><br><br>
      teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste<br>
      linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha<br>
      teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste<br>
      linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha<br>
      teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste<br>
      linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha<br>
      teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste<br>
      linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha<br>
      teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste<br>
      linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha<br>                 
      teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste<br>
      linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha<br>
      teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste<br>
      linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha<br>
      teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste<br>
      linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha<br>
      teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste<br>
      linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha<br>
      teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste<br>
      linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha<br>
      teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste<br>
      linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha<br>
      teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste<br>
      linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha<br>
      teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste  teste teste teste teste teste<br>
      linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha linha<br>                                               
      </font>
    <p>&nbsp; </p>
  </div>
</div>
  <div align="right"><a href="#" onMouseOver="scroll(2)" onMouseOut="noScroll()" onClick="return false"><img src="baixo.gif" width="12" height="6" ></a>
  </div>

</body>

</html>

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

po!

ninguém te respondeu hein... sacanagem... hehehe

tirei um tempinho pra ver o que tu queria, e está na mao.

primeiro, tem que colocar nowrap na tua div.

<div id="divScrollTextCont" style="left: 317px; top: 150px; width: 447px; height: 221px" nowrap>
agora é só colocar o seguinte codigo onde tu bem entender, onde ficar melhor dentro da tua pagina:
<img id="imgEsquerda" style="cursor: hand" src="esquerda.gif" 
             width="5" height="8" hspace="0" vspace="0" border="1" 
             onmouseover="timerTexto = setInterval('divScrollTextCont.scrollLeft -= 10;',50);" 
             onmouseout="clearInterval(timerTexto);"> rola barra horizontal
<img id="imgDireita" style="cursor: hand" src="direita.gif" 
     width="5" height="8" hspace="0" vspace="0" border="1" 
     onmouseover="timerTexto = setInterval('divScrollTextCont.scrollLeft += 10;',50);" 
     onmouseout="clearInterval(timerTexto);">

e não esquece de criar 2 imagens esquerda.gif e direita.gif.

beleza?!

at,

Editado por Mestre SAM
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,4k
×
×
  • Criar Novo...