Presentemos las representaciones de la pared de fotos que me di cuenta de acuerdo con la explicación del video en línea.
El efecto final es el siguiente:
• Cuando se hace clic en una imagen, la imagen se mueve al área central y se acerca. Cuando se hace clic en la imagen, los lados delanteros y traseros se cambian a la visualización.
• Cuando se hace clic en una determinada imagen, las posiciones de todas las imágenes se reordenan al azar
• Cuando se hace clic en un botón de control, la imagen correspondiente se muestra en el medio y el botón de control cambia el estilo correspondiente. Cuando se hace clic continuamente en un botón de control, la imagen cambiará la parte delantera y posterior con el clic del botón
Descomposición de VCD de todo el efecto, como se muestra en la figura a continuación:
Descompone los casos de una manera que las computadoras puedan entender.
• Ver visión: plantilla de interfaz básica HTML + CSS
• Controlador: procesamiento de contenido de JavaScript, procesamiento de eventos
• Datos de datos: data.js no es necesario, ayuda a comprender
Los datos de datos se utilizan muy comúnmente. Si escribe el contenido a la vista, es decir, HTML, debe modificar el HTML cuando desee cambiar el contenido, pero si usa VCD, solo necesita modificar la parte de datos. Al mismo tiempo, la parte de datos generales es generada por el fondo, por lo que tal reemplazo es más conveniente. Los carteles en este caso son generados por plantillas más datos.
Ver sección
El área de efecto se descompone en las siguientes tres partes:
• El área actual del póster
Centro horizontal y vertical
Permite mostrarse y voltearse por <Button de barra de control>
• Áreas de almacenamiento izquierda e izquierda
Divida en áreas izquierda y derecha por <el área de carteles actual>
Es almacenar otros carteles
Cada póster está posicionado al azar y en ángulo
• Área de barra de control
Control y visualización del póster correspondiente
Flip Toggle <Póster de pantalla actual> frontal y atrás
El código HTML implementado es el siguiente:
<Body OnselectStart = 'return false;'> <!-aquí para evitar que el texto de la página se seleccione-> <!-2. Reescribe la vista como una cadena de plantilla-> <div id = "wrap"> <!-Div.photo es responsable de la traducción y rotación-> <diving ondClick = "thure (this)" id = "Photo _ {{{{{{{{}}}"> <! Volteando el frente y la parte posterior -> <div> <p> <img src = "photo/{{img}}"> </p> <p> {{cottion}} </p> </div> <div> <p> {{DESC}} </p> </div> </div> </div> </iv> </iv> <VIV> </div>Aquí, {{img}}, {{subtítulos}}, y {{Desc}} son cadenas de plantilla, y la parte de datos se correspondirá pero se reemplazará más adelante.
El estilo de la parte de la vista es el siguiente:
<style type = "text/css"> *{relleno: 0; margen: 0; } Body {Background-Color: #ffff; Color:#555; Font-Family: 'Avenir Next', 'lantinghei sc'; tamaño de fuente: 14px; -MOZ-FONT-SMOUFT: antialiased; -Webkit-font-smoothing: Antialiased;/*Font Smooth*/} .Wrap {// El área de la imagen está centrada verticalmente en el ancho del cuerpo: 100%; Altura: 900px; Posición: Absoluto; /*--------------------------------------------------- margen-top: -300px; /*--------------------------------------------------------------------------------------- ------------------------------------------------------------------------------------------- /*Debido a que cada póster se coloca aleatoriamente usando la parte superior e izquierda, establezca la posición en absoluto*/ posición: absoluto; índice z: 1; Shadow de caja: 0 0 1PX RGBA (0,0,0, .01); /*Transformar: Rotatey (30deg);*/ -Moz -Transition: todos .6s; /*Deje que el póster se mueva para producir efecto de animación*/ -webkit -transición: todos .6s; } .photo .side {ancho: 100%; Altura: 100%; Color de fondo: #EEE; Posición: Absoluto; arriba: 0; Derecha: 0; relleno: 20px; dimensionamiento de la caja: border-box; } .photo .side-front .image {ancho: 100%; Altura: 250px; Línea de altura: 250px; desbordamiento: oculto; } .photo .side-front .image img {ancho: 100%; } .photo .side-front .caption {text-align: center; tamaño de fuente: 16px; Línea de altura: 50px; } .photo .side-back .desc {color:#666; tamaño de fuente: 14px; Línea de altura: 1.5em; } /*El estilo de cartel seleccionado actualmente* /.photo_center { /*--- Implementar el método de centrado vertical Uno izquierdo: 50%; arriba: 50%; margen-izquierda: -130px; margen-top: -160px; *//*Implementar el método de centrado vertical dos*/ TOP: 0; Abajo: 0; Izquierda: 0; Derecha: 0; margen: auto; Z-índice: 999; // deja que el póster seleccionado actualmente no esté cubierto por otros carteles}/*responsable de voltear*/.photo-wrap {posición: absoluto; Ancho: 100%; Altura: 100%; -S-MOZ-TRANSFORMYLE: PERSERVE-3D; -Webkit-transform-style: Preserve-3D;/*Deje que los elementos internos apoyen el efecto de 3D*/ transformado: preservar-3d;/*Debido a esta oración, la parte posterior de Firefox no se puede mostrar*/ -Webkit-Transition: todos 1s; -Moz-Transition: todos 1s; Transición: todos 1s; } .photo-wrap .side {-moz-backface-visibilidad: hidden; // esconderse cuando la pantalla no está frente a la pantalla-webkit-backface-visibilidad: hidden; VISIBILIDAD DE CABEZA: Oculta; } .photo-wrap .side-front {-Moz-Transform: Rotatey (0deg); -webkit-transform: Rotatey (0deg); transformación: rotatey (0deg); } .photo-wrap .side-back {-Moz-Transform: Rotatey (180deg); -Webkit-transform: Rotatey (180deg); transformación: Rotatey (180 grados); } .photo-front .photo-wrap {-moz-transform: rotatey (0deg); -webkit-transform: Rotatey (0deg); transformación: rotatey (0deg); } .photo-back .photo-wrap {-moz-transform: Rotatey (180deg); -Webkit-transform: Rotatey (180deg); transformación: Rotatey (180 grados); } /*Estilo de botón de control* / .nav {ancho: 40%; Altura: 30px; Línea de altura: 30px; Posición: Absoluto; Izquierda: 30%; Abajo: 20px; Índice Z: 999; /*Color de fondo: #fff;*/ Text-Align: Center; } /*Estilo normal* / .nav .i {ancho: 30px; Altura: 30px; Pantalla: bloque en línea; cursor: puntero; Color de fondo: #AAA; Text-Align: Center; Radio fronterizo: 50%; -Moz-Transform: escala (.48); -Webkit-transform: escala (.48); transformación: escala (.48); -WebKit-Transition: todos 1s; -Moz-Transition: todos 1s; } .nav .i: después de {} /*Estilo actualmente seleccionado* / .nav .i_current {-moz -Transform: scale (1); -Webkit-transform: escala (1); } .nav .i_current: después de {opacidad: 1; } /*Back {-Moz-Transform: Rotatey (-180deg); -webkit-transform: Rotatey (-180deg); Color de fondo:#555; }/*Optimización de estilo,*/ .photo {/*La definición a continuación es eliminar flashes repentinos de imágenes*/ Izquierda: 50%; arriba: 50%; margen: -160px 0 0 -130px; } .photo-wrap {-Moz-Transform-Origin: 0% 50%; -WebKit-Transform-Origin: 0% 50%; } .photo-front .photo-wrap {-moz-transform: traduce (0px, 0px) rotatey (0deg); -webkit-transform: traduce (0px, 0px) rotatey (0deg); } .photo-back .photo-wrap {-moz-transform: traduce (260px, 0px) rotatey (180deg); -Webkit-transform: traduce (260px, 0px) Rotatey (180deg); }Aquí hay algunas partes importantes del estilo.
Configuración en el caso: -Webkit-Perspectiva: 800px;
Puede ver el efecto de configurar esto y luego configurar Rotatey (45 grados). Si no se establece -Webkit -Transform, no se mostrará el efecto de rotación. La rotación de la imagen está girando en el plano. Si se establece demasiado pequeño, el efecto será el siguiente:
Div.Photo es responsable de la traducción y rotación de la imagen, mientras que Div.Photo-Wrap es responsable del flip 3D (conmutación frontal y posterior). Para habilitar los elementos internos para admitir los efectos 3D, set -webkit-transform-style: Preserve-3D para div.photo-wrap.
.photo-wrap .side estilo -webkit-backface-visibilidad: oculto; El propósito de esta oración es esconderse cuando el elemento no está frente a la pantalla.
Para hacer que la imagen se mueva y el efecto de animación Flip, set -webkit-transition para .photo-wrap: veamos la explicación de la transición a continuación:
Estilo de barra de navegación
/*Estilo normal*/ .nav .i {ancho: 30px; Altura: 30px; Pantalla: bloque en línea; cursor: puntero; Color de fondo: #AAA; Text-Align: Center; Radio fronterizo: 50%; -Moz-Transform: escala (.48); -Webkit-transform: escala (.48); transformación: escala (.48); -WebKit-Transition: todos 1s; -Moz-Transition: todos 1s; } /*Estilo actualmente seleccionado* / .nav .i_current {-moz -Transform: scale (1); -Webkit-transform: escala (1); } .nav .i_current: después de {opacidad: 1; } /*Estilo de retroceso* / .nav .i_back {-Moz-Transform: Rotatey (-180deg); -webkit-transform: Rotatey (-180deg); Color de fondo:#555; }Diagrama de análisis de la barra de navegación:
Los botones de la barra de navegación también se dividen en la parte delantera y trasera. Para distinguir los efectos de la parte delantera y posterior, están configurados para tener diferentes colores de fondo, y al mismo tiempo, el efecto de flip se establece para reducir el botón normal: transformar: escala (.48), y cuando se selecciona el botón, escala (1). La razón para entrar y salir del botón es saber exactamente si el estilo general se destruirá cuando se seleccione el botón actual.
Después de que se establecen todos los estilos básicos, se realizarán algunas optimizaciones en el sentido. Para que la imagen se vea ligeramente desplazada a la derecha como una puerta al cambiar de frente y trasero, puede agregar el siguiente estilo:
/*Optimización de estilo,*/ .photo {/*La definición a continuación es eliminar flashes repentinos de imágenes*/ Izquierda: 50%; arriba: 50%; margen: -160px 0 0 -130px; } .photo-wrap {-Moz-Transform-Origin: 0% 50%; -WebKit-Transform-Origin: 0% 50%; } .photo-front .photo-wrap {-moz-transform: traduce (0px, 0px) rotatey (0deg); -webkit-transform: traduce (0px, 0px) rotatey (0deg); } .photo-back .photo-wrap {-moz-transform: traduce (260px, 0px) rotatey (180deg); -Webkit-transform: traduce (260px, 0px) Rotatey (180deg); }Sección de datos
Los datos se escriben principalmente en Data.js. Una matriz de datos se define en Data.js para almacenar información de 22 imágenes. La estructura de salida de la matriz de datos es la siguiente:
Cada objeto almacenado en datos incluye tres atributos: subtítulos, DESC e IMG. El contenido de cada objeto almacenado en datos se emite de la siguiente manera. La parte de datos se usa principalmente para reemplazar las cadenas en plantillas.
El contenido de Data.js es el siguiente:
var data = []; var dataTR = '1. Foto 1 <br>/<br>/verduras verdes <br>/<br>/<br>/2. Foto 2 <br>/<br>/Photo 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. Un pequeño juguete de oso súper lindo <br>/<br>/un juguete de oso súper lindo <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>/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>/17, Photo 17 <br>/<br>/<br>/<br>/17, Foto, foto 17 <br>/<br>/<br>/<br>/17, Foto 17 <br>/<br>/<br>/<br>/17, Photo 17 <br>/<br>/<br>/<br>/18, Photo 18 <br>/<br>/Photo 18 <br>/<br>/19, Photo 19 <br>/<br>/<br>/Photo 19 <br>/<<br>/20, 20, 20, Foto, foto 20 <br>/<br>/<br>/Photo 20 <br>/<br>/21, Photo 21 <br>/<br>/<br>/<br>/<br>/22, Photo 22 <br>/<br>/'; // El siguiente código es dividir el contenido en dataTR en la matriz de datos var d = dataTR.Split (' <br> <br> <br> '); para (Var i = 0; i ++) {var c = d [i] .split ('<br> <br>'); data.push ({img: 'img'+(i+1)+'. jpg', subtítulos: c [0] .split (',') [1], Desc: c [1]});}Control de descomposición de VCD-Controlador
• Salir todo el contenido del póster (ver plantilla de vista + datos)
• Control de asignación de posición (posición central, ambos lados)
• Salida y control de la barra de control (interruptor, flip)
ENTRAR TODOS POSTEROS, iterar a través de la matriz de datos y llenar el contenido en la plantilla.
// 4. Salida Todos los carteles var data = data; function addPhotos () {var platplate = $ ('#wrap'). html (); var html = []; var nav = []; para (s en datos) {var _html = Template.replace ('{{index}}', s) .replace ('{{img}}', data [s] .img) .replace ('{{Caption}}', data [s] .caption) .replace ('{{Desc}}', datos [s] .Desc); html.push (_html); // Cada póster tiene un botón correspondiente nav.push ('<span id = "nav _'+s+'" onClick = "thur (this)"> </span>'); } // Escribir después de traversal html.push ('<div>'+nav.join ('')+'</div>'); $ ('#wrap'). html (html.join ('')); rsort (aleatorio ([0, data.length])); }La clasificación del póster, el diagrama de análisis es el siguiente:
Al clasificar los carteles para particiones izquierda y derecha, primero analice la posición de los carteles para las particiones izquierda y derecha de la siguiente manera:
Use números aleatorios para generar la posición de los valores izquierdo y superior del póster actual
// crear un valor aleatorio, admitiendo el rango de valor.random ([min, max]); función aleatoria (rango) {var max = math.max (rango [0], rango [1]); var min = math.min (rango [0], rango [1]); var diff = max-min; Var número = Math.Ceil (Math.random ()*Diff + Min); número de devolución; } // 6. Calcule el rango de particiones izquierda y derecha {izquierda: {x: [min, max], y [min, max]}, derecha {x: [min, max], y: [min, max]}} rango de funciones () {var ran = {izquierda: {x: [], y: []}, derecha: {x: [], y: []};; var wrap = {w: $ ('#wrap'). width (), // w: 600, h: $ ('#wrap'). Height ()} var foto = {w: $ ('. Photo') [0] .ClientWidth, h: $ ('. ran.left.y = [0 - photo.h, wrap.h]; ran.right.x = [wrap.w/2 + photo.w/2, wrap.w + photo.w]; ran.right.y = ran.left.y; regreso corriendo; }Luego ordene los carteles
//5.sorting Función del póster rsort (n) {var _photo = $ ('. Photo'); VAR Photos = []; for (var i = 0; i <_photo.length; i ++) {_photo [i] .classname = _photo [i] .classname.replace (// s*photo_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 tanto el frente de la foto como el retroceso se reemplazan arriba, _photo [i] .classname += 'foto-front'; _photo [i] .style.left = ''; _photo [i] .style.top = ''; _photo [i] .style ['-Moz-Transform'] = _Photo [i] .Style ['transformar'] = _Photo [i] .style ['-WebKit-Transform'] = 'Rotate (0deg) escala (1.3)'; Photos.push (_photo [i]); } // var foto_center = $ ('#Photo _'+n) [0]; var foto_center = document.getElementById ('Photo _'+N); var newclass = Photo_Center.ClassName + 'Photo_Center'; //console.log(photo_center.attr('class ')); Photo_center = Photos.splice (n, 1) [0]; //photo_center.classname = newclass; $ ('#Photo _'+N) .attr ('class', newclass); // Divida el póster restante en dos partes var Photos_left = Photos.splice (0, Math.Ceil (Photos.length/2)); var Photos_right = Photos; var ranges = range (); // clasificación de partición izquierda para (s en Photos_left) {var photo = Photos_left [s]; Photo.style.left = Random (ranges.left.x) + 'px'; Photo.style.top = Random (ranges.left.y) + 'Px'; Photo.Style ['-Moz-Transform'] = Photo.Style ['Transform'] = Photo.Style ['-WebKit-Transform'] = 'Rotate ('+Random ([-150,150])+'deg) escala (1)'; } // Ordena de partición correcta para (s en Photos_Right) {var Photo = Photos_Right [s]; Photo.style.left = Random (ranges.right.x) + 'px'; Photo.style.top = Random (ranges.right.y) + 'px'; Photo.Style ['-Moz-Transform'] = Photo.Style ['Transform'] = Photo.Style ['-WebKit-Transform'] = Photo.Style ['-WebKit-Transform'] = Photo.Style ['-WebKit-Transform'] = 'Rotate ('+Random ([-100,100])+'deg) escala (1)'; } // Procesamiento de botones de control 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*/, ''); } // agregue el estilo I_Current $ ('#nav _' +n) [0] .classname += 'i_current'; }El efecto de conmutación de la parte delantera y posterior del póster y el efecto de conmutación del botón de control:
function Turn (elem) {var cls = elem.classname; var n = elem.id.split ('_') [1]; if (! (/photo_center/.test (cls))) {rsort (n); } // El nombre de clase se cambia después de la ejecución de la instrucción if arriba, porque no quiero esto // siempre hay una falta de clase_center class var cs = $ ('#foto _'+n) [0]; CLS = Cs.ClassName; if (/photo-front/.test (cls)) {cls = cls.replace (/photo-front/, 'Photo-back'); $ ('#nav _' +n) [0] .classname += 'i_back'; } else {cls = cls.replace (/photo-back/, 'foto-front') $ ('#nav _'+n) [0] .classname = $ ('#nav _'+n) [0] .classname.replace (// s*i_back/s*/, ''); } cs.classname = cls; }Puede comprender qué póster es el póster actualmente mostrado basado en N en RSORT (N), y también puede saber qué botón es el botón seleccionado actualmente.
Lo anterior es el análisis del efecto correspondiente.
Resumir:
Ideas y métodos para analizar casos:
• Método de análisis de módulos
• Método de análisis de VCD
Algunos efectos nuevos de CSS
• Configuración de posición de vista 3D y soporte de subelementos 3D
• Ocultar cuando se voltea invisible
• Utilice la rotación CSS (eje y) y desplazamiento
• Animación de conmutación de CSS
Habilidades de secuencia de comandos frontal
• Función de plantilla simple para el reemplazo de cadenas
• Obtenga algunos números aleatorios de acuerdo con el rango
• Use scripts para cambiar el nombre de clase y los atributos de estilo específicos del elemento
Durante el proceso de implementación, un problema que encontré fue que al voltear la imagen, el reverso no puede ocultarse en Firefox. Es decir, hay un problema con el siguiente código, y se ha verificado durante mucho tiempo.
.photo-wrap .side {-Moz-Backface-visibilidad: Hidden; -webkit-backface-visibilidad: oculto; Backface-visibilidad: Hidden;}Resulta ser: me perdí el estilo Transform: Preserve-3D . Entonces, cuando la compatibilidad del navegador, recuerde escribir estilos sin prefijo
.photo-wrap {posición: absoluto; Ancho: 100%; Altura: 100%; -S-MOZ-TRANSFORMYLE: PERSERVE-3D; -webkit-transform-style: Preserve-3D;/*Deje que los elementos internos apoyen el efecto de 3d*/<span style = "color:#cc0000;">-style transformado: preservar-3d;/*Debido a esta oración, la parte posterior de Firefox no se puede mostrar*/</span> -webkit-transition: todos 1s; -Moz-Transition: todos 1s; Transición: todos 1s; }Finalmente, se adjunta el código JS completo:
<script type = "text/javaScript"> // Generar un valor aleatorio al azar, lo que respalda el rango de valor.random ([min, max]); función aleatoria (rango) {var max = math.max (rango [0], rango [1]); var min = math.min (rango [0], rango [1]); var diff = max-min; Var número = Math.Ceil (Math.random ()*Diff + Min); número de devolución; } // 4. Salida Todos los carteles var data = data; function addPhotos () {var platplate = $ ('#wrap'). html (); var html = []; var nav = []; para (s en datos) {var _html = Template.replace ('{{index}}', s) .replace ('{{img}}', data [s] .img) .replace ('{{Caption}}', data [s] .caption) .replace ('{{Desc}}', datos [s] .Desc); html.push (_html); // Cada póster tiene un botón correspondiente nav.push ('<span id = "nav _'+s+'" onClick = "thur (this)"> </span>'); } html.push ('<div>'+nav.join ('')+'</div>'); $ ('#wrap'). html (html.join ('')); rsort (aleatorio ([0, data.length])); } addphotos () // 6. Calcule el rango de particiones izquierda y derecha {izquierda: {x: [min, max], y [min, max]}, derecha {x: [min, max], y: [min, max]}} rango de funciones () {var ran = {izquierda: {x: [], y: []}, derecha: {x: [], y: []};; var wrap = {w: $ ('#wrap'). width (), // w: 600, h: $ ('#wrap'). Height ()} var foto = {w: $ ('. Photo') [0] .ClientWidth, h: $ ('. ran.left.y = [0 - photo.h, wrap.h]; ran.right.x = [wrap.w/2 + photo.w/2, wrap.w + photo.w]; ran.right.y = ran.left.y; regreso corriendo; } // 5. Ordenar la función del cartel rsort (n) {var _photo = $ ('. Photo'); VAR Photos = []; for (var i = 0; i <_photo.length; i ++) {_photo [i] .classname = _photo [i] .classname.replace (// s*photo_center/s*/, ''); _photo [i] .classname = _photo [i] .classname.replace (// s*foto-front/s*/, ''); _photo [i] .classname = _photo [i] .classname.replace (// s*Photo-Back/S*/, ''); _photo [i] .classname = _photo [i] .classname.replace (// s*Photo-Back/S*/, ''); // porque lo anterior ha reemplazado tanto a la foto como al retroceso, _photo [i] .classname += 'foto-front'; _photo [i] .style.left = ''; _photo [i] .style.top = ''; _photo [i] .style ['-Moz-Transform'] = _Photo [i] .Style ['transformar'] = _Photo [i] .style ['-WebKit-Transform'] = 'Rotate (0deg) escala (1.3)'; Photos.push (_photo [i]); } // var foto_center = $ ('#Photo _'+n) [0]; var foto_center = document.getElementById ('Photo _'+N); var newclass = Photo_Center.ClassName + 'Photo_Center'; //console.log(photo_center.attr('class ')); Photo_center = Photos.splice (n, 1) [0]; //photo_center.classname = newclass; $ ('#Photo _'+N) .attr ('class', newclass); // dividir el póster restante en dos partes var Photos_left = Photos.splice (0, Math.Ceil (Photos.length/2)); var Photos_right = Photos; var ranges = range (); // clasificación de partición izquierda para (s en Photos_left) {var photo = Photos_left [s]; Photo.style.left = Random (ranges.left.x) + 'px'; Photo.style.top = Random (ranges.left.y) + 'Px'; Photo.Style ['-Moz-Transform'] = Photo.Style ['Transform'] = Photo.Style ['-WebKit-Transform'] = 'Rotate ('+Random ([-150,150])+'deg) escala (1)'; } // clasificación de partición correcta para (s en Photos_Right) {var foto = Photos_right [s]; Photo.style.left = Random (ranges.right.x) + 'px'; Photo.style.top = Random (ranges.right.y) + 'px'; Photo.Style ['-Moz-Transform'] = Photo.Style ['Transform'] = Photo.Style ['-WebKit-Transform'] = 'Rotate ('+Random ([-100,100])+'Deg) escala (1)'; } // Procesamiento de botones de control 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*/, ''); } // agregue el estilo I_Current $ ('#nav _' +n) [0] .classname += 'i_current'; } function Turn (elem) {var cls = elem.classname; var n = elem.id.split ('_') [1]; if (! (/photo_center/.test (cls))) {rsort (n); } // El nombre de clase se cambia después de la ejecución de la instrucción IF anterior, porque no quiero esto // la clase Photo_Center var cs = $ ('#Photo _'+n) [0]; CLS = Cs.ClassName; if (/photo-front/.test (cls)) {cls = cls.replace (/photo-front/, 'Photo-back'); $ ('#nav _' +n) [0] .classname += 'i_back'; } else {cls = cls.replace (/photo-back/, 'foto-front') $ ('#nav _'+n) [0] .classname = $ ('#nav _'+n) [0] .classname.replace (// s*i_back/s*/, ''); } cs.classname = cls; } </script>Lo anterior es todo el contenido de este artículo. Espero que sea útil para el aprendizaje de todos y espero que todos apoyen más a Wulin.com.