Ir para conteúdo


Barra De Rolagem Horizontal


  • Por favor, faça o login para responder
3 respostas neste tópico

#1 wawa

wawa
  • Membros
  • 38 posts

Postado 28 February 2007 - 12:42 AM

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:
CÓ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>


#2 berilson

berilson
  • Membros
  • 321 posts

Postado 28 February 2007 - 11:47 AM



CARA NÃO SEI AJUDAR VC, MAS ESSE SCRIPT TÁ NA NET
ONDE EU CHO TUA PÁGINA, QUERO COPIAR AQUELA GIF OK

#3 Mestre SAM

Mestre SAM
  • Membros
  • 70 posts

Postado 02 March 2007 - 07:14 PM

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.

CÓDIGO
<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:

CÓDIGO
<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,

#4 wawa

wawa
  • Membros
  • 38 posts

Postado 05 March 2007 - 09:19 PM

Valeu pela ajuda cara, vo colocar seu código no meu site, muito obrigadu mesmo

Fuiiiii....




0 usuário(s) está(ão) lendo este tópico

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)