Vamos apresentar as renderizações da parede fotográfica que percebi de acordo com a explicação de vídeo on -line.
O efeito final é o seguinte:
• Quando uma imagem é clicada, a imagem se move para a área central e aumenta o zoom. Quando a imagem é clicada, os lados dianteiros e traseiros são alterados para exibir.
• Quando uma determinada imagem é clicada, as posições de todas as imagens são reordenadas aleatoriamente
• Quando um botão de controle é clicado, a imagem correspondente é exibida no meio e o botão de controle altera o estilo correspondente. Quando um botão de controle é clicado continuamente, a imagem alterna a frente e o traseiro com o clique do botão
Decomposição do VCD de todo o efeito, como mostrado na figura abaixo:
Decompor casos de uma maneira que os computadores possam entender.
• Visualizar visão: HTML + CSS Basic Interface Modelo
• Controlador: Processamento de Conteúdo JavaScript, Processamento de Eventos
• Dados de dados: Data.js não é necessário, ajuda a entender
Os dados de dados são muito usados. Se você escrever o conteúdo para a visualização, ou seja, html, você precisará modificar o HTML quando deseja alterar o conteúdo, mas se você usar o VCD, só precisará modificar a parte dos dados. Ao mesmo tempo, a parte geral dos dados é gerada pelo plano de fundo; portanto, esse substituto é mais conveniente. Os pôsteres neste caso são todos gerados por modelos mais dados.
Exibir seção
A área de efeito é decomposta nas três partes a seguir:
• A área de pôster atual
Centro horizontal e vertical
Permite ser exibido e invertido por <botão de barra de controle>
• Áreas de armazenamento esquerdo e esquerdo
Divida nas áreas esquerda e direita por <A Área atual de pôsteres>
É armazenar outros pôsteres
Cada pôster está posicionado e angular aleatoriamente
• Área da barra de controle
Controle e exibir o pôster correspondente
TOLLA DE ALTER <Poster de exibição atual> Frente e traseiro
O código HTML implementado é o seguinte:
<Body OnSelectStart = 'Return false;'> <!-Aqui para impedir que o texto da página seja selecionado-> <!-2. Reescreva a exibição como uma string de modelo-> <div id = "wrap"> <!-div.photo é responsável pela tradução e rotação-> <onclick = "Turn (this)" Id = "` `_ _ _ {{{ flipping the front and back --> <div> <p><img src="photo/{{img}}"></p> <p>{{caption}}</p> </div> <div> <p>{{desc}}</p> </div> </div> </div> </div> </div> </div> </div>Aqui, {{img}}, {{legend}} e {{desc}} são seqüências de modelos, e a parte dos dados será correspondente, mas substituída posteriormente.
O estilo da parte de exibição é o seguinte:
<style type = "text/css"> *{preenchimento: 0; margem: 0; } corpo {Background-Color: #ffff; Cor:#555; Fonte-família: 'Avenir Next', 'Lantinghei SC'; Size da fonte: 14px; -Moz-font-Smoothing: Antialiaseado; -Webkit-font-smoothing: AntialiasEd;/*Font Smooth*/} .WRAP {// A área da imagem é centralizada verticalmente na largura do corpo: 100%; Altura: 900px; Posição: Absoluto; /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- Margin-top: -300px; /*------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- /*Como cada pôster é posicionado aleatoriamente usando a parte superior e esquerda, defina a posição como absoluta*/ posição: absoluta; Z-Index: 1; Box-Shadow: 0 0 1PX RGBA (0,0,0, 0,01); /*transform: giratey (30deg);*/ -moz -transição: todos .6s; /*Deixe o pôster se mover para produzir efeito de animação*/ -webkit -transição: todos .6s; } .photo .side {width: 100%; Altura: 100%; Background-Color: #eee; Posição: Absoluto; topo: 0; Direita: 0; preenchimento: 20px; Timing de caixa: caixa de fronteira; } .photo .side-Front .image {width: 100%; Altura: 250px; altura de linha: 250px; estouro: oculto; } .photo .side-Front .image img {width: 100%; } .photo .side-Front .Caption {text-align: Center; Size da fonte: 16px; altura da linha: 50px; } .photo .side-back .desc {color:#666; Size da fonte: 14px; altura da linha: 1.5em; } /*O estilo de pôster atualmente selecionado* /.photo_center { /*--- Implementar o método de centralização vertical um restante: 50%; TOP: 50%; margem-esquerda: -130px; Margin-top: -160px; *//*Implementar o método de centralização vertical dois*/ topo: 0; Inferior: 0; Esquerda: 0; Direita: 0; margem: automático; Z-Index: 999; // Que o pôster atualmente selecionado não seja coberto por outros pôsteres}/*Responsável por lançar*/.photo-wrap {Position: Absolute; largura: 100%; Altura: 100%; -Moz-transform-estilo: Perseve-3D; -Webkit-transform-estilo: preserve-3d;/*Deixe os elementos dentro apoiarem o efeito do estilo 3D*/ transformada: preserve-3d;/*por causa dessa frase, a parte de trás do Firefox não pode ser exibida*/ -Webkit-transição: todos os 1s; -moz-transição: todos os 1s; transição: todos os 1s; } .photo-wrap .side {-moz-backface-visibilidade: Hidden; // Ocultar quando a tela não está voltada para a tela-webkit-backface-visibilidade: Hidden; Visibilidade da backface: Hidden; } .photo-wrap .side-Front {-moz-transform: rotatey (0deg); -webkit-transform: giratey (0deg); Transform: giratey (0deg); } .photo-wrap .side-back {-moz-transform: giratey (180deg); -Webkit-transform: giratey (180deg); Transform: giratey (180deg); } .photo-front .photo-wrap {-moz-transform: rotatey (0deg); -webkit-transform: giratey (0deg); Transform: giratey (0deg); } .photo-back .photo-wrap {-moz-transform: rotatey (180deg); -Webkit-transform: giratey (180deg); Transform: giratey (180deg); } /*Botão de controle estilo* / .nav {width: 40%; Altura: 30px; altura de linha: 30px; Posição: Absoluto; Esquerda: 30%; Inferior: 20px; Z-Index: 999; /*cor de fundo: #fff;*/ text-align: Center; } /*Estilo normal* / .nav .i {width: 30px; Altura: 30px; Exibição: bloco embutido; Cursor: Ponteiro; Background-Color: #AAA; Alinhamento de texto: centro; Radio de fronteira: 50%; -moz-transform: escala (.48); -webkit-transform: escala (.48); transformação: escala (.48); -Webkit-transição: todos os 1s; -moz-transição: todos os 1s; } .nav .i: após {} /*estilo atualmente selecionado* / .nav .i_current {-moz -transform: scale (1); -Webkit-transform: escala (1); } .nav .i_current: após {opacidade: 1; } /*Back {-moz-transform: rotatey (-180deg); -webkit-transform: giratey (-180deg); cor de fundo:#555; }/*Otimização do estilo,*/ .photo {/*A definição abaixo é eliminar flashes repentinos de imagens*/ esquerda: 50%; TOP: 50%; margem: -160px 0 0 -130px; } .photo-wrap {-moz-transform-origin: 0% 50%; -Webkit-transform-original: 0% 50%; } .photo-front .photo-wrap {-moz-transform: translate (0px, 0px) giratey (0deg); -Webkit-transform: tradutor (0px, 0px) giration (0deg); } .photo-back .photo-wrap {-moz-transform: translate (260px, 0px) giratey (180deg); -Webkit-transform: tradutor (260px, 0px) giration (180deg); }Aqui estão algumas partes importantes do estilo.
Configurações no caso: -Webkit-Perspective: 800px;
Você pode ver o efeito de definir isso e definir o Rotatey (45deg). Se -webkit -transform não estiver definido, o efeito de rotação não será exibido. A rotação da imagem está apenas girando no avião. Se estiver definido muito pequeno, o efeito será o seguinte:
Div.photo é responsável pela tradução e rotação da figura, enquanto o Div.Photo-Wrap é responsável pelo flip 3D (comutação frontal e traseira). Para ativar os elementos internos para suportar efeitos 3D, defina -webkit-transform-estilo: preserve-3d para div.photo-wrap.
.photo-wrap. O objetivo desta frase é ocultar quando o elemento não estiver voltado para a tela.
Para fazer com que a imagem se mova e o efeito de animação flip, defina -webkit-transição para .photo-wrap: Vamos ver a explicação da transição abaixo:
Estilo da barra de navegação
/*Estilo normal*/ .nav .i {width: 30px; Altura: 30px; Exibição: bloco embutido; Cursor: Ponteiro; Background-Color: #AAA; Alinhamento de texto: centro; Radio de fronteira: 50%; -moz-transform: escala (.48); -webkit-transform: escala (.48); transformação: escala (.48); -Webkit-transição: todos os 1s; -moz-transição: todos os 1s; } /*Estilo atualmente selecionado* / .nav .i_current {-moz -transform: escala (1); -Webkit-transform: escala (1); } .nav .i_current: após {opacidade: 1; } /*estilo de volta* / .nav .i_back {-moz-transform: giratey (-180deg); -webkit-transform: giratey (-180deg); cor de fundo:#555; }Diagrama de análise da barra de navegação:
Os botões da barra de navegação também são divididos na frente e nas costas. Para distinguir os efeitos da frente e da parte traseira, eles devem ter diferentes cores de fundo e, ao mesmo tempo, o efeito flip está definido para reduzir o botão normal - Transformar: escala (.48) e quando o botão é selecionado, a escala (1). A razão para o zoom dentro e fora do botão é saber exatamente se o estilo geral será destruído quando o botão atual for selecionado.
Depois que todos os estilos básicos estiverem definidos, algumas otimizações serão feitas no efeito. Para fazer com que a imagem pareça um pouco compensada à direita como uma porta ao alternar a frente e para trás, você pode adicionar o seguinte estilo:
/*Otimização do estilo,*/ .photo {/*A definição abaixo é eliminar flashes repentinos de imagens*/ esquerda: 50%; TOP: 50%; margem: -160px 0 0 -130px; } .photo-wrap {-moz-transform-origin: 0% 50%; -Webkit-transform-original: 0% 50%; } .photo-front .photo-wrap {-moz-transform: translate (0px, 0px) giratey (0deg); -Webkit-transform: tradutor (0px, 0px) giration (0deg); } .photo-back .photo-wrap {-moz-transform: translate (260px, 0px) giratey (180deg); -Webkit-transform: tradutor (260px, 0px) giration (180deg); }Seção de dados
Os dados são escritos principalmente em data.js. Uma matriz de dados é definida no Data.js para armazenar informações de 22 fotos. A estrutura de saída da matriz de dados é a seguinte:
Cada objeto armazenado nos dados inclui três atributos: Legenda, Desc e IMG. O conteúdo de cada objeto armazenado nos dados é emitido da seguinte maneira. A parte dos dados é usada principalmente para substituir strings nos modelos.
O conteúdo do data.js é o seguinte:
var dados = []; var datastr = '1. Foto 1 <br>/<br>/vegetais verdes <br>/<br>/<br>/2. Foto 2 <br>/<br>/foto 2 <br>/<br>/<br>/3. Foto 3 <br>/<br>/<br>/<br>/4. Foto 4 <br>/<br>/<br>/<br>/4. Foto 4 <br>/<br>/<br>/5. Foto 5 <br>/<br>/<br>/<br>/<br>/6. A super cute little bear toy<br>/<br>/ A super cute little bear toy<br>/<br>/ >/<br>/<br>/7, Photo 7<br>/<br>/<br>/<br>/8, Photo 8<br>/<br>/<br>/9, Photo 9<br>/<br>/<br>/<br>/9, Photo 9<br>/<br>/<br>/<br>/10, Photo 10<br>/<br>/<br>/11, Photo 11<br>/<br>/<br>/<br>/12, Photo 12<br>/<br>/<br>/ 12<br>/<br>/<br>/13, Photo 13<br>/<br>/<br>/<br>/14, Photo 14<br>/<br>/<br>/14, Photo 14<br>/<br>/<br>/15, Photo 15 <br>/<br>/<br>/<br>/15, foto 15 <br>/<br>/<br>/<br>/16, foto 16 <br>/<br>/<br>/<br>/17, foto 17 <br>/<br>/<br>/<br>, foto 17 <br> <br>/<br>/<br>/<br>/<br> 17 <br>/<br>/<br>/<br>/17, foto 17 <br>/<br>/<br>/<br>/17, foto 17 <br>/<br>/<br>/<br>/18, foto 18 <br>/<br>/foto 18 <br>/19, foto 19 <br>/<br>/<br>/<br>/foto 18 <br>/foto 19 <br>/<br>/<br>/<br>/<br>/ 20 <br>/<br>/<br>/foto 20 <br>/<br>/21, foto 21 <br>/<br>/<br>/<br>/<br>/22, foto 22 <br>/<br>/'; // o código seguinte é dividido o conteúdo no Datatr no Data Array var d datastr.split (' <br> <br> i ++) {var c = d [i] .split ('<br> <br>'); data.push ({img: 'img'+(i+1)+'. jpg', legenda: c [0] .split (',') [1], desc: c [1]});}Controle do controlador de decomposição do VCD
• Sair todo o conteúdo do pôster (modelo de visualização + dados)
• Controle de alocação de posição (posição central, posição dos dois lados)
• Saída e controle da barra de controle (interruptor, flip)
Saia todos os pôsteres, iterem através da matriz de dados e preencha o conteúdo no modelo.
// 4. Saída todos os pôsteres var dados = dados; função addphotos () {var modelo = $ ('#wrap'). html (); var html = []; var NAV = []; para (s em dados) {var _html = modelo.replace ('{{index}}', s) .replace ('{{img}}', dados [s] .img) .replace ('{{{}}, dados [s] .Caption).). html.push (_html); // Cada pôster possui um botão correspondente Nav.push ('<span id = "Nav _'+S+'" OnClick = "Turn (this)"> </span>'); } // Escreva de volta após o traversal html.push ('<div>'+nav.join ('')+'</div>'); $ ('#wrap'). html (html.join ('')); rsort (aleatório ([0, data.length])); }A classificação do pôster, o diagrama de análise é o seguinte:
Ao classificar pôsteres para partições esquerda e direita, primeiro analise a posição dos pôsteres para partições esquerda e direita da seguinte forma:
Use números aleatórios para gerar a posição esquerda e os valores superiores do pôster atual
// Crie um valor aleatório, suportando a faixa de valor.random ([min, max]); função aleatória (intervalo) {var max = math.max (intervalo [0], intervalo [1]); var min = math.min (intervalo [0], intervalo [1]); var diff = max-min; var número = math.ceil (math.random ()*diff + min); número de retorno; } // 6. Calcule o intervalo de partições esquerda e direita {esquerda: {x: [min, max], y [min, max]}, direita {x: [min, max], y: [min, max]}} range () {var ran = {esquerda: {x: [], y: []}, {x]; var wrap = {w: $ ('#wrap'). width (), // w: 600, h: $ ('#wrap'). Height ()} var foto = {w: $ ('. ran.left.y = [0 - foto.h, wrap.h]; ran.right.x = [wrap.w/2 + foto.w/2, wrap.w + foto.w]; ran.right.y = ran.left.y; retorno correu; }Então classifique os pôsteres
//5.Sorting Poster Função rsort (n) {var _photo = $ ('. Photo'); var fotos = []; for (var i = 0; i <_photo.length; i ++) {_photo [i] .className = _photo [i] .className.replace (// s*foto_center/s*/, ''); _photo [i] .className = _photo [i] .className.replace (// s*foto-front/s*/, ''); _photo [i] .className = _photo [i] .className.replace (// s*foto-front/s*/, ''); _photo [i] .className = _photo [i] .className = _photo [i] .className.replace (// s*foto-back/s*/, ''); // porque o Photo-Front e o Photo-Back são substituídos acima, _photo [i] .className += 'Photo-Front'; _photo [i] .style.left = ''; _photo [i] .style.top = ''; _photo [i] .style ['-moz-transform'] = _photo [i] .style ['transform'] = _photo [i] .style ['-webkit-transform'] = 'rotate (0deg) (1.3)'; fotos.push (_photo [i]); } // var foto_center = $ ('#foto _'+n) [0]; var foto_center = document.getElementById ('foto _'+n); var newclass = foto_center.className + 'photo_center'; //console.log(photo_center.attr('class ')); foto_center = photos.splice (n, 1) [0]; //photo_center.className = newclass; $ ('#foto _'+n) .attr ('classe', newclass); // Divida o pôster restante em duas partes var fotos_left = photos.splice (0, math.ceil (photos.length/2)); var fotos_right = fotos; var ranges = range (); // Partição esquerda Classificação para (s em fotos_left) {var foto = photos_left [s]; foto.style.left = aleatória (ranges.left.x) + 'px'; foto.style.top = Random (Ranges.Left.Y) + 'PX'; foto.style ['-moz-transform'] = foto.style ['transform'] = foto.style ['-webkit-transform'] = 'girate ('+aleatório ([-150,150])+'deg) escala (1)'; } // Partição direita classificar para (s em fotos_right) {var foto = photos_right [s]; foto.style.left = aleatória (ranges.right.x) + 'px'; foto.style.top = Random (Ranges.right.y) + 'px'; foto.style ['-moz-transform'] = foto.style ['transform'] = photo.style ['-webkit-transform'] = foto.style ['-webkit-transform'] = foto.style ['-webkit-transform'] = ') ('+aleatório ((-100,100]; } // Processamento do botão de controle var NAVS = $ ('. I'); for (var i = 0; i <Navs.length; i ++) {Navs [i] .className = Navs [i] .className.replace (// s*i_current/s*/, ''); Navs [i] .className = Navs [i] .className.replace (// s*i_back/s*/, ''); } // adicione i_current style $ ('#NAV _' +n) [0] .className += 'i_current'; }O efeito de comutação da frente e de trás do pôster e o efeito de comutação do botão de controle:
função Turn (elem) {var cls = elem.className; var n = elem.id.split ('_') [1]; if (! (/foto_center/.test (cls))) {rsort (n); } // O nome da classe é alterado após a execução da instrução IF acima, porque eu não quero isso // sempre há uma falta de classe foto_center var cs = $ ('#foto _'+n) [0]; cls = cs.className; if (/photo-front/.test (cls)) {cls = cls.replace (/foto-front/, 'foto-back'); $ ('#NAV _' +n) [0] .className += 'i_back'; } else {cls = cls.replace (/foto-back/, 'photo-front') $ ('#Nav _'+n) [0] .className = $ ('#Nav _'+n) [0] .className.replace (// s*i_back/s*/, ''); } cs.className = cls; }Você pode entender qual pôster é o pôster atualmente exibido com base no n no rsort (n) e também pode saber qual botão é o botão atualmente selecionado.
O acima é a análise de efeito correspondente.
Resumir:
Idéias e métodos para analisar casos:
• Método de análise de módulos
• Método de análise VCD
Alguns novos efeitos CSS
• Configurações de posição da exibição 3D e suporte de sub-elementos 3D
• Esconda quando invertido invisível
• Use a rotação CSS (eixo y) e deslocamento
• CSS Switching Animation
Habilidades de script front-end
• Função de modelo simples para substituição de string
• obter alguns números aleatórios de acordo com o intervalo
• Use scripts para alternar o nome da classe do elemento e os atributos de estilo específicos
Durante o processo de implementação, um problema que encontrei foi que, ao lançar a imagem, o verso não pode ser oculto no Firefox. Ou seja, há um problema com o código a seguir e foi verificado há muito tempo.
.photo-wrap .side {-moz-backface-visibilidade: hidden; -Webkit-backface-visibilidade: Hidden; Visibilidade da backface: Hidden;}Acontece que eu perdi o estilo de transformação: Preserve-3D . Então, quando a compatibilidade do navegador, lembre -se de escrever estilos sem prefixo
.photo-wrap {Position: Absolute; largura: 100%; Altura: 100%; -Moz-transform-estilo: Perseve-3D; -Webkit-transform-estilo: preserve-3d;/*Deixe os elementos dentro apoiarem o efeito de 3d*/<span style = "cor:#cc0000;"> estilo de transformação: preserve-3d;/*por causa desta frase, a parte traseira do Firefox não pode ser exibida*/</span> -webkit-transição: toda a 1S; -moz-transição: todos os 1s; transição: todos os 1s; }Finalmente, o código JS completo está anexado:
<script type = "text/javascript"> // gerar um valor aleatório aleatoriamente, suportando o range.random ([min, max]); função aleatória (intervalo) {var max = math.max (intervalo [0], intervalo [1]); var min = math.min (intervalo [0], intervalo [1]); var diff = max-min; var número = math.ceil (math.random ()*diff + min); número de retorno; } // 4. Saída todos os pôsteres var dados = dados; função addphotos () {var modelo = $ ('#wrap'). html (); var html = []; var NAV = []; para (s em dados) {var _html = modelo.replace ('{{index}}', s) .replace ('{{img}}', dados [s] .img) .replace ('{{{}}, dados [s] .Caption).). html.push (_html); // Cada pôster possui um botão correspondente Nav.push ('<span id = "Nav _'+S+'" OnClick = "Turn (this)"> </span>'); } html.push ('<div>'+nav.join ('')+'</div>'); $ ('#wrap'). html (html.join ('')); rsort (aleatório ([0, data.length])); } addphotos () // 6. Calcule o intervalo de partições esquerda e direita {esquerda: {x: [min, max], y [min, max]}, direita {x: [min, max], y: [min, max]}} range () {var ran = {esquerda: {x: [], y: []}, {x]; var wrap = {w: $ ('#wrap'). width (), // w: 600, h: $ ('#wrap'). Height ()} var foto = {w: $ ('. ran.left.y = [0 - foto.h, wrap.h]; ran.right.x = [wrap.w/2 + foto.w/2, wrap.w + foto.w]; ran.right.y = ran.left.y; retorno correu; } // 5. Classificar função do pôster rsort (n) {var _photo = $ ('. Foto'); var fotos = []; for (var i = 0; i <_photo.length; i ++) {_photo [i] .className = _photo [i] .className.replace (// s*foto_center/s*/, ''); _photo [i] .className = _photo [i] .className.replace (// s*foto-front/s*/, ''); _photo [i] .className = _photo [i] .className.replace (// s*foto-back/s*/, ''); _photo [i] .className = _photo [i] .className.replace (// s*foto-back/s*/, ''); // porque o acima substituiu o Photo-Front e o Photo-Back, _photo [i] .className += 'Photo-Front'; _photo [i] .style.left = ''; _photo [i] .style.top = ''; _photo [i] .style ['-moz-transform'] = _photo [i] .style ['transform'] = _photo [i] .style ['-webkit-transform'] = 'rotate (0deg) (1.3)'; fotos.push (_photo [i]); } // var foto_center = $ ('#foto _'+n) [0]; var foto_center = document.getElementById ('foto _'+n); var newclass = foto_center.className + 'photo_center'; //console.log(photo_center.attr('class ')); foto_center = photos.splice (n, 1) [0]; //photo_center.className = newclass; $ ('#foto _'+n) .attr ('classe', newclass); // dividindo o pôster restante em duas partes var fotos_left = photos.splice (0, math.ceil (photos.length/2)); var fotos_right = fotos; var ranges = range (); // Partição esquerda Classificação para (s em fotos_left) {var foto = photos_left [s]; foto.style.left = aleatória (ranges.left.x) + 'px'; foto.style.top = Random (Ranges.Left.Y) + 'PX'; foto.style ['-moz-transform'] = foto.style ['transform'] = foto.style ['-webkit-transform'] = 'girate ('+aleatório ([-150,150])+'deg) escala (1)'; } // Partição direita Classificação para (s em fotos_right) {var foto = photos_right [s]; foto.style.left = aleatória (ranges.right.x) + 'px'; foto.style.top = Random (Ranges.right.y) + 'px'; foto.style ['-moz-transform'] = foto.style ['transform'] = foto.style ['-webkit-transform'] = 'girate ('+aleatório ([-100,100])+'deg) escala (1)'; } // Processamento do botão de controle var NAVS = $ ('. I'); for (var i = 0; i <Navs.length; i ++) {Navs [i] .className = Navs [i] .className.replace (// s*i_current/s*/, ''); Navs [i] .className = Navs [i] .className.replace (// s*i_back/s*/, ''); } // adicione i_current style $ ('#NAV _' +n) [0] .className += 'i_current'; } função Turn (elem) {var cls = elem.className; var n = elem.id.split ('_') [1]; if (! (/foto_center/.test (cls))) {rsort (n); } // O nome da classe é alterado após a execução da instrução IF acima, porque não quero isso // a classe Photo_Center var cs = $ ('#foto _'+n) [0]; cls = cs.className; if (/photo-front/.test (cls)) {cls = cls.replace (/foto-front/, 'foto-back'); $ ('#NAV _' +n) [0] .className += 'i_back'; } else {cls = cls.replace (/foto-back/, 'photo-front') $ ('#Nav _'+n) [0] .className = $ ('#Nav _'+n) [0] .className.replace (// s*i_back/s*/, ''); } cs.className = cls; } </script>O exposto acima é todo o conteúdo deste artigo. Espero que seja útil para o aprendizado de todos e espero que todos apoiem mais o wulin.com.