Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Eu vi nas colunas de dreamweaver como fazer uma rolagem horizontal.....mas como posso adapta-la para rolagem vertical???AJUDEM!!!!!!!
Rolagem Horizontal
Número da coluna: 10
Data: 12/05/2002
Olá Pessoal!!!
Veremos hoje um assunto que foi muito pedido por email. A rolagem horizontal, muito usada na apresentação de portfólios On-line.
Veja Aqui o exemplo usado nesta coluna.
Baixe Aqui o exemplo.
Para fazer esta rolagem, usaremos um Script e duas camadas (uma para a máscara e outra para o conteúdo).
1º Passo
Abra um novo documento... vá ao código fonte e adicione este script, abaixo da Tag </HEAD>.
<script language="JavaScript">
var velo_scroll = 20; // velocidade da rolagem
var pixel_scroll = 10; // quantidade de saltos entre os pixels
var window_width = 400;
var isNav;
var isIE;
var coll = "";
var styleObj = "";if (parseInt(navigator.appVersion) >= 4) {
if (navigator.appName == "Netscape") {
isNav = true;} else {
isIE = true;
coll = "all.";
styleObj = ".style";
}
}
function getObjWidth(obj) {
var theObj = eval("document." + coll + obj);
if (isNav) {
return theObj.clip.width;} else {
return theObj.clientWidth;
}
}
function getObject(obj) {
if (typeof obj == "string") {
theObj = eval("document." + coll + obj + styleObj);} else {
theObj = obj;
}
return theObj;
}
function getInsideWindowWidth() {
if (isNav) {
return window.innerWidth;} else {
return document.body.clientWidth;
}
}
function getObjectLeft(obj) {
var theObj = getObject(obj);
if (isNav) {
return theObj.left;} else {
return theObj.pixelLeft;
}
}
function shiftBy(obj, x, y) {
var theObj = getObject(obj);
if (isNav) {
theObj.left = theObj.left + x;
theObj.top = theObj.top + y;} else {
theObj.pixelLeft = theObj.pixelLeft + x;
theObj.pixelTop = theObj.pixelTop + y;
}
}
var tim = 0;
var noScroll = true;
function mLeft(obj) {obj = "menu"
if(!noScroll && getObjectLeft(obj) < window_width) {
shiftBy(obj, pixel_scroll, 0);
tim = setTimeout("mLeft()", velo_scroll);
}
}
function mRight(obj) {obj = "menu"
if(!noScroll && getObjectLeft(obj) > -(getObjWidth(obj) - (getInsideWindowWidth())) - window_width) {
shiftBy(obj, -pixel_scroll, 0);
tim = setTimeout("mRight()", velo_scroll);
}
}
function noMove() {
clearTimeout(tim);
noScroll = true;
}
</script>
2º PassoCrie uma camada chamada "mask" e outra chamada "menu". Agora, coloque a camada "menu" dentro da camada "mask", como na figura abaixo.
Observação: Para colocar a camada "menu" dentro da camada "mask", selecione a "menu" pelo ícone "c" e arraste para dentro da "mask".
3º Passo
Na caixa de propriedades, atribua ao ítem Overflow o valor "Hidden" nas duas camadas.... a partir de agora, a camada "mask" define o que será visto da camada "menu". Note na figura abaixo, na cor verde, a camada "mask" define a visão.
4º Passo
Monte o lay-out dentro da camada menu..... no nosso exemplo, o lay-out é a figura do carro e na camada mask, jogamos um fundo quadriculado.
5º Passo
Monte as figuras que servirão de rolagem, uma para a direita, e outra para a esquerda.
6º Passo
Pelo código fonte, adicione ao botão da esquerda esta linha de comando:
<a href="#" onmouseover="noScroll=false; mLeft('menu')" onmouseout="noMove()">FIGURA/TEXTO DA AÇÃO</a>
Pelo código fonte, adicione ao botão da direita esta linha de comando:
<a href="#" onMouseOver="noScroll=false; mRight('menu')" onMouseOut="noMove()">FIGURA/TEXTO DA AÇÃO</a>
Confira o resultado no nosso exemplo.
Observação: note que na caixa de comportamentos (behaviors) existem, agora, novas ações, intepretadas como Custom Script.
Com esses 6 passos, você já tem uma rolagem horizontal! Agora, é só criar seu próprio lay-out...
____________________________________________________
É isso ae galera... Obrigado pelos emails que estão mandando e pela visitação na coluna..... voltem sempre.... mandem pedidos, sugestões ou dúvidas pelo email ou pelo fórum...... É pra vocês que escrevemos estas colunas........
Um grande abraço à todos!
-----------------------------------------------------------------------------
Texto retirado de: Coluna De Dreamweaver Site Imasters
Salve.
Acho que isso vai resolver o seu problema.
Da uma olhadinha neste link:
http://galeon.hispavista.com/webjordis/jav...p/missllarg.htm
mas as extensões do dreamweaver fazem isso, de uma olhada nesse site:www.projectseven.comcomdireito a extensoes, tutoriais e tudo mais....
Salve.Rapa tinha esquecido deste site, valeu richie.Na verdade tinha perdido a URL.
Salve. Faz do mesmo jeito só muda o código.Manda o codigo que você tem para eu dar uma olhadinha.