Scroll

katatau · Agosto 10, 2005

Olá pessoal

Gostaria de saber se alguém sabe fazer este tipo de scroll....

http://www.bananadesign.com.br/

é aquele scroll que tem as setinhas em laranja.....

como eu faço isso???

valeu pessoal

dmetallica · Agosto 11, 2005

Amigo para fazer isso você usa CSS:

No proprio site já tem o fonte.

Akilo é uma tabela , saca tem tr,td.

Ai vai o codigo retirado do proprio site:

<style>
td{font:bold 10px verdana; color:#F8C400}
a.menu{color:#F8C400; background-color:#000066; display:block; width:100%; height:18px; padding-top:3px; font:bold 10px verdana; text-decoration:none; text-align:center}
a.menu:hover{color:#F8C400; background-color:#497CB6}
</style>

katatau · Agosto 11, 2005

Esse é não seria o codigo do estilo?

Eu gostaria de fazer a ação de levar um texto para cima e baixa-lo?

Acho que agora eu expliquei melhor.....

valeu

OSJunior · Agosto 11, 2005

Cara...acho melhor você tentar fazer algo e depois se tiver problemas peça ajuda. Não é muito dificil de se fazer.

Crie algumas layer's e utilize juntamente o setTimeOut, entende?

katatau · Agosto 12, 2005

não sou muito bom em JS...

red_new · Agosto 13, 2005

ESTA AI o que você QUER EU ACHO AGORA È SÒ FORMATAR

function tiraSpace(texto)

{

var palavra = "";

var letra = ""

var j = texto.length;

for(i=0; i<j; i++){

letra = (texto.charAt(i,1));

letra1 = (texto.charAt(i+1,1));

if ((letra == " ")&&(letra1 == " "))

letra = letra.replace(letra,"");

if ((letra == " ")&&(letra1 == ""))

letra = letra.replace(letra,"");

palavra = palavra + letra;

letra = ""

letra1 = ""

}

return palavra;

}

</script>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>

<head>

<title>Untitled Document</title>

<!--

function chama_link(valor){

window.open(valor)

}

function P7_JumpMenu(selObj,restore){ //v1.7 by Project Seven

var theFullString = selObj.options[selObj.selectedIndex].value;

if (restore) selObj.selectedIndex=0;

var theLength = theFullString.length;

var endPos = theFullString.lastIndexOf("~");

var theUrl, theTarget, theParent;

if (endPos > 0)

{theUrl = theFullString.substring(0,endPos);}

else

{theUrl = theFullString;}

endPos++

if (endPos < theLength)

{theTarget = theFullString.substring(endPos,theLength)}

else

{theTarget = "window:Main";}

if (theTarget == "window:New")

{window.open(theUrl);}

else if (theTarget == "window:Main")

{eval("parent.location="+theUrl+"'");}

else

{eval("parent.frames[\'"+theTarget+"\].location='"+theUrl+"'");}

}

//-->

// begin absolutely positioned scrollable area object scripts

// Extension developed by David G. Miles

// Original Scrollable Area code developed by Thomas Brattli

function verifyCompatibleBrowser(){

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 verifyCompatibleBrowser()

var speed=50

var loop, timer

function ConstructObject(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=MoveAreaUp;this.down=MoveAreaDown;

this.MoveArea=MoveArea; this.x; this.y;

this.obj = obj + "Object"

eval(this.obj + "=this")

return this

}

function MoveArea(x,y){

this.x=x;this.y=y

this.css.left=this.x

this.css.top=this.y

}

function MoveAreaDown(move){

if(this.y>-this.scrollHeight+objContainer.clipHeight){

this.MoveArea(0,this.y-move)

if(loop) setTimeout(this.obj+".down("+move+")",speed)

}

function MoveAreaUp(move){

if(this.y<0){

this.MoveArea(0,this.y-move)

if(loop) setTimeout(this.obj+".up("+move+")",speed)

}

function PerformScroll(speed){

if(initialised){

loop=true;

if(speed>0) objScroller.down(speed)

else objScroller.up(speed)

}

function CeaseScroll(){

loop=false

if(timer) clearTimeout(timer)

}

var initialised;

function InitialiseScrollableArea(){

objContainer=new ConstructObject('divContainer')

objScroller=new ConstructObject('divContent','divContainer')

objScroller.MoveArea(0,0)

objContainer.css.visibility='visible'

initialised=true;

}

// end absolutely positioned scrollable area object scripts

</script>

#divUpControl{position:absolute; width:320; left:10; top:10; z-index:1; text-align: right}

#divDownControl{position:absolute; width:320; left:10; top:270; z-index:1; text-align: right}

#divContainer{position:absolute; width:320; height:240; overflow:hidden; top:34; left:10; clip:rect(0,320,240,0); visibility:hidden}

#divContent{position:absolute; top:0; left:0}

</style>

</head>

</div>

</div>

AS SETAS você DEFINE LOGO ACIMA EX:imagens/scroll_down.gif

imagens/scroll_up.gif

e AQUI FICA O TEXTO CONFORME ESTA ACIMA

AQUI FICA O TEXTO CONFORME ESTA ACIMA

</div>

</body>

</html>

katatau · Agosto 13, 2005

valeu cara

muito bom

OSJunior · Agosto 13, 2005

Entrar

Scroll

Pergunta

katatau

Link para o comentário

Compartilhar em outros sites

7 respostass a esta questão

Posts Recomendados

dmetallica

Link para o comentário

Compartilhar em outros sites

katatau

Link para o comentário

Compartilhar em outros sites

OSJunior

Link para o comentário

Compartilhar em outros sites

katatau

Link para o comentário

Compartilhar em outros sites

red_new

Link para o comentário

Compartilhar em outros sites

katatau

Link para o comentário

Compartilhar em outros sites

OSJunior

Link para o comentário

Compartilhar em outros sites

Estatísticas dos Fóruns

Navegação

Atividades