1. Insira uma camada no DreamWeaver e use-a como área de rolagem. Defina os parâmetros da camada da seguinte forma:
Defina o número da camada como: slayer, que é o atributo ID da camada.
Os valores esquerdo e superior são a posição da camada na página e podem ser definidos conforme necessário aqui são 100 e 120 pixels;
A largura e a altura são do tamanho da camada e também são definidas conforme necessário;
Clipe refere-se à área de exibição da camada, e a parte fora do clipe fica oculta. Usamos essa área de exibição para ocultar a parte direita da camada e, em seguida, controlamos o movimento da camada enquanto controlamos essa área de exibição para completar a rolagem. efeito de área que queremos.
Defina a largura da tela à direita, aqui 340 é igual à altura;
A seguir está o código da camada:
< div id="slayer" style="posição:absolute; topo: 120px; esquerda: 100px; clipe: rect(0 340 120 0); altura: 120px; cor de fundo: #CCCCCC; cor de fundo da camada: # CCCCCC; borda: 1px nenhum #000000; largura: 670px" >
Podemos colocar algumas imagens horizontalmente na camada, aqui usamos uma tabela. O tamanho da camada definida acima é suficiente para acomodar todas as imagens.
2. O código a seguir é o código de rolagem da camada, que inserimos abaixo da marca da camada <div>:
Ao inserir, observe que o valor de layerW é o valor do lado direito do clipe, que aqui é 340.
< linguagem de script = "javascript" >
< !-- //por hve
var layerW=340; //Define a largura da área de exibição
var camadaH=parseInt(slayer.style.height);
var camadaL=parseInt(slayer.style.left);
var camadaT=parseInt(slayer.style.top);
var step=0; //valor de rolagem
função movstar(a,hora){
if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
movimento(a);
movx=setTimeout("movstar("+a+","+tempo+")",tempo);
}
função mover(){
clearTimeout(movx);
}
função mov(a){
slayer.style.left = (passo+=a) + camadaL;
clipeL = passo 0;
clipR=camadaW-passo;
clipeB=camadaH;
clipeT=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /script>
3. Insira outra camada para colocar o “botão de controle”.
Esta camada está localizada abaixo da camada anterior e é utilizada para colocar os “botões de controle”. A posição pode ser ajustada conforme necessário, conforme mostrado abaixo. Usamos os blocos coloridos da tabela como botões de controle aqui. Seria melhor se fizéssemos duas imagens em forma de seta.
4. Adicione os seguintes códigos nas tags de "Botões de Controle".
Isso é adicionado na tag da tabela <td>. Se você usar uma imagem como botão, adicione-a na tag <img>.
Botão esquerdo:
onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover();movstar(1,20)"
Botão direito:
onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover();movstar(-1,20)"
O significado do código acima é que quando o mouse aponta para o botão, a ação começa, pressionar e segurar o botão acelera, o mouse sai do botão para interromper a ação e o sinal - indica movimento na direção oposta.
5. Concluir
Quando o mouse aponta para o "Botão de Controle", ele rola para a esquerda ou para a direita. Clicar e segurar o mouse irá acelerar a rolagem.
O código completo é: (pode ser copiado e testado na área BODY)
< div id="slayer" style="posição:absolute; topo: 120px; esquerda: 100px; clipe: rect(0 340 120 0); altura: 120px; cor de fundo: #CCCCCC; cor de fundo da camada: # CCCCCC; borda: 1px nenhum #000000; largura: 670px" >
< linguagem de script = "javascript" >
< !-- //por hve
var layerW=340; //Define a largura da área de exibição
var camadaH=parseInt(slayer.style.height);
var camadaL=parseInt(slayer.style.left);
var camadaT=parseInt(slayer.style.top);
var step=0; //valor de rolagem
função movstar(a,hora){
if (a< 0&&step >-parseInt(slayer.scrollWidth)+layerW||a >0&&step< 0)
movimento(a);
movx=setTimeout("movstar("+a+","+tempo+")",tempo);
}
função mover(){
clearTimeout(movx);
}
função mov(a){
slayer.style.left = (passo+=a) + camadaL;
clipeL = passo 0;
clipR=camadaW-passo;
clipeB=camadaH;
clipeT=0;
slayer.style.clip="rect("+clipT+" "+clipR+" "+clipB+" "+clipL+")";
}
//-- >
</ /script>
<tabela cellpacing="10" border="0" cellpadding="0" >
<tr bgcolor="#FFCC99" >
<td height="100" largura="100" > </ /td >
<td height="100" largura="100" > </ /td >
<td height="100" largura="100" > </ /td >
<td height="100" largura="100" > </ /td >
<td height="100" largura="100" > </ /td >
<td height="100" largura="100" > </ /td >
< /tr>
< /tabela>
</div>
< div id="Layer1" style="position:absolute; width:344px; height:20px; z-index:1; left: 97px; top: 244px" >
<largura da tabela="100%" altura="100%" >
<tr>
<td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(3,2)" onMouseOut="movover()" onMouseOver="movstar(1,20)" onMouseUp="movover() ;movstar(1,20)" largura="14" >< /td >
< td >< /td >
<td bgcolor="#CCCCCC" height="14" onMouseDown="movover();movstar(-3,2)" onMouseOut="movover()" onMouseOver="movstar(-1,20)" onMouseUp="movover ();movstar(-1,20)" largura="14" >< /td >
< /tr>
< /tabela>
</div>