Este exemplo foi escrito por mim enquanto estudava tudo de novo. Espero que possa ajudar todos a aprender juntos. O efeito é mostrado na figura:
O código HTML se parece com o seguinte:
A cópia do código é a seguinte:
<html xmlns = "http://www.w3.org/1999/xhtml" xml: lang = "en" lang = "en">
<head>
<Title> Criação da ferramenta de navegação de fotos </ititle>
<script type = "text/javascript" src = "js/main.js"> </script>
<link rel = "Stylesheet" type = "text/css" href = "style/css.css">
</head>
<Body>
<div id = "pic_browser">
<img src = "imagens/prev.png" onclick = "javascript: jzk.ui.moveImg (-1);"/>
<img id = "img1" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (3);"> </div> <!-Adicione máscara de três níveis->
<img id = "img2" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (2);"> </div> <!-Adicione máscara secundária->
<img id = "img3" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (1);"> </div> <!-Adicione um nível de máscara->
<img id = "img4" onclick = ""/>
<img id = "img5" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (-1);"> </div> <!-o mesmo efeito que mask1->
<img id = "img6" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (-2);"> </div> <!-o mesmo efeito que mask2->
<img id = "img7" onclick = ""/>
<div onclick = "javascript: jzk.ui.moveimg (-3);"> </div> <!-o mesmo efeito que mask3->
<img src = "imagens/next.png" onclick = "javascript: jzk.ui.moveimg (1);"/>
</div>
</body>
</html>
O código CSS é o seguinte:
O Mask1, 2, 3 ... aqui está uma divisão que cobre várias fotos. O atributo de opacidade é usado para definir a transparência, que pode alcançar uma sensação de nebulosidade e tornar a aparência mais bonita.
A cópia do código é a seguinte:
corpo {largura: 1340px; altura: 500px; fundo: url (../ imagens/body_bg.gif) no-repeat;}
#pic_browser {largura: 860px; altura: 192px; Posição: relativa; margem: 130px 106px;}
#pic_browser img {posição: absoluto; borda: nenhum;}
.prev {top: 76px; esquerda: 0px; }
#IMG1, .MASK3 {Width: 106px; altura: 70px; esquerda: 45px; topo: 61px; z-índice: 4;}
#img2, .Mask2 {Width: 166px; altura: 110px; esquerda: 95px; topo: 41px; z-índice: 5;}
#IMG3, .MASK1 {Width: 226px; altura: 150px; esquerda: 175px; topo: 21px; z-índice: 6;}
#img4 {largura: 290px; altura: 192px; esquerda: 285px; topo: 0px; z-index: 7;}
#IMG5, .Mask5 {Width: 226px; altura: 150px; direita: 175px; topo: 21px; Z-Index: 6;}
#IMG6, .Mask6 {Width: 166px; Hight: 110px; direita: 95px; topo: 41px; Z-Index: 5;}
#IMG7, .MASK7 {Width: 106px; Hight: 70px; direita: 45px; topo: 61px; Z-Index: 4;}
.next {top: 76px; direita: 0px;}
.Mask1, .Mask2, .Mask3, .Mask5, .Mask6, .Mask7 {Background: #fff; Posição: Absoluto;}
.Mask1, .Mask5 {Opacity: 0.3;}
.Mask2, .Mask6 {Opacity: 0.5;}
.Mask3, .Mask7 {Opacity: 0.7;}
O código JS é o seguinte:
A cópia do código é a seguinte:
window.onload = function ()
{
jzk.app.initimg ();
}
var iMgarray = new Array ();
imgarray [0] = 'imagens/1.jpg';
imgarray [1] = 'imagens/2.jpg';
imgarray [2] = 'imagens/3.jpg';
imgarray [3] = 'imagens/4.jpg';
imgarray [4] = 'imagens/5.jpg';
imgarray [5] = 'imagens/6.jpg';
imgarray [6] = 'imagens/7.jpg';
var base = 0;
var jzk = {}; /*Defina o namespace*/
jzk.tools = {};/*camada de primeira camada*/
jzk.ui = {};/*camada de segunda camada*/
jzk.ui.moveImg = função (deslocamento)
{
base = (deslocamento de base);
for (var i = base; i <base +7; i ++)/*define i como um subscrito variável para a matriz*/
{
var iMg = document.getElementById ('img'+(i-Base+1));/*verifique se a variável img é img1, img2, img3 ... até img7, esses 7 elementos img*/
if (i <0) / *Subscrito da matriz i <0, indicando deslocamento> 0, * /
{
img.src = imGarray [imgarray.length+i];
}
caso contrário, se (i> imGarray.length-1)
{
img.src = imGarray [i-imgarray.length];
}
outro
{
img.src = imGarray [i];
}
}
}
jzk.app = {}; /*Terceira camada em camadas*/
jzk.app.initimg = function ()/* inicialize a imagem de exibição, ou seja, chame o processo de movimentação da função: o parâmetro é 7, a base é igual a -7, i é igual a -7, -6, -5, -4, -3, -2, -1 e os elementos correspondentes são img1, img2, ... ‘img7, assim, img1, e os elementos correspondentes são img1, img2, ... -7,], então: -2, e os elementos correspondentes são img1, img2, ... ... img7, assim, img1, e os elementos correspondentes são: IMG1, IMG2, ... img2 = imGarray [-6+7] ...*/
{
jzk.ui.moveImg (7);/*Parâmetros iniciais devem ser definidos como: o número de imagens que podem ser exibidas (7 aqui); */
}
Os três arquivos são difíceis de entender pelo código JS. Também fiz comentários detalhados acima. Se mais alguém puder lê -lo e não entender, você pode discutir isso nos comentários abaixo.