Préduisons les rendus du mur de photos que j'ai réalisées selon l'explication de la vidéo en ligne.
L'effet final est le suivant:
• Lorsqu'une image est cliquée, l'image se déplace vers la zone centrale et zoome.
• Lorsqu'une certaine image est cliquée, les positions de toutes les images sont réorganisées au hasard
• Lorsqu'un bouton de commande est cliqué, l'image correspondante s'affiche au milieu et le bouton de contrôle modifie le style correspondant. Lorsqu'un bouton de commande est cliqué en continu, l'image changera le côté avant et arrière en cliquant sur le bouton
Décomposition VCD de l'effet entier, comme indiqué sur la figure ci-dessous:
Décomposer les cas d'une manière que les ordinateurs peuvent comprendre.
• Voir la vision: modèle d'interface de base HTML + CSS
• Contrôleur: traitement du contenu JavaScript, traitement des événements
• Données données: data.js n'est pas nécessaire, aide à comprendre
Les données de données sont très couramment utilisées. Si vous écrivez le contenu dans la vue, c'est-à-dire HTML, vous devez modifier le HTML lorsque vous souhaitez modifier le contenu, mais si vous utilisez VCD, vous n'avez qu'à modifier la pièce de données. Dans le même temps, la partie générale des données est générée par l'arrière-plan, donc un tel remplacement est plus pratique. Les affiches dans ce cas sont toutes générées par des modèles plus des données.
Voir la section
La zone d'effet est décomposée dans les trois parties suivantes:
• La zone d'affiche actuelle
Centre horizontal et vertical
Permet d'être affiché et retourné par <bouton de barre de contrôle>
• Zones de stockage gauche et gauche
Divisez en zones gauche et droite par <la zone d'affiche actuelle>
C'est pour stocker d'autres affiches
Chaque affiche est positionnée au hasard et inclinée
• zone de barre de contrôle
Contrôler et afficher l'affiche correspondante
Flip Toggle <Poster d'affichage actuel> avant et arrière
Le code HTML implémenté est le suivant:
<corps onselectstart = 'return false;'> <! - Ici pour empêcher le texte de la page d'être sélectionné -> <! - 2. Réécrivez la vue en tant que chaîne de modèle -> <div id = "wrap"> <! - div.photo est responsable de la traduction et de la rotation {index} " 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>Ici, {{img}}, {{légende}}, et {{desc}} sont des chaînes de modèle, et la pièce de données sera correspondante mais remplacée plus tard.
Le style de la partie de la vue est le suivant:
<style type = "text / css"> * {padding: 0; marge: 0; } body {background-Color: #ffff; Couleur: # 555; Font-Family: «Avenir Next», «Lantinghei SC»; taille de police: 14px; -Moz-Font-Soothing: Antialiased; -Webkit-Font-Smoothing: Antialiased; / * Font Smooth * /} .Wrap {// La zone d'image est centrée verticalement dans la largeur du corps: 100%; hauteur: 900px; Position: absolue; / * ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- marge: -300px; / * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- / * Parce que chaque affiche est positionnée au hasard à l'aide du haut et de la gauche, définissez la position sur Absolute * / Position: Absolute; Z-Index: 1; Box-shadow: 0 0 1px rgba (0,0,0, .01); / * Transform: Rotatey (30Deg); * / -moz-transition: tous .6s; / * Laissez l'affiche se déplacer pour produire l'effet d'animation * / -webkit-transition: tous .6s; } .photo .side {width: 100%; hauteur: 100%; Color d'arrière-plan: #eee; Position: absolue; en haut: 0; à droite: 0; rembourrage: 20px; Dimensionnement en boîte: Border-Box; } .photo .side-front .image {width: 100%; hauteur: 250px; hauteur de ligne: 250px; débordement: caché; } .photo .side-front .image img {width: 100%; } .photo .side-front .caption {text-align: Centre; taille de police: 16px; hauteur de ligne: 50px; } .photo .side-back .desc {couleur: # 666; taille de police: 14px; hauteur de ligne: 1.5EM; } / * Le style de l'affiche actuellement sélectionné * / .photo_center {/ * --- implémenter la méthode de centrage vertical une gauche: 50%; en haut: 50%; marge-gauche: -130px; marge: -160px; * / / * Implémenter la méthode de centrage vertical deux * / top: 0; en bas: 0; à gauche: 0; à droite: 0; marge: auto; Z-Index: 999; // Laissez l'affiche actuellement sélectionnée ne sera pas couverte par d'autres affiches} / * Responsable du retournement * / .photo-wap {position: absolue; Largeur: 100%; hauteur: 100%; -Moz-Transform-style: Perserve-3D; -Webkit-Transform-Style: Preserve-3d; / * Laissez les éléments à l'intérieur soutiennent l'effet de 3d * / Transform-style: Preserve-3d; / * En raison de cette phrase, l'arrière de Firefox ne peut pas être affiché * / -webkit-transition: tous les 1; -Moz-Transition: Tous les 1; Transition: Tous les 1; } .photo-wap .side {-moz-backface-visibilité: Hidden; // masquer lorsque l'écran ne fait pas face à l'écran-webkit-backface-visibilité: Hidden; backface-visibilité: caché; } .photo-wap .side-front {-moz-transform: rotatey (0deg); -Webkit-Transform: Rotatey (0Deg); transformée: rotatey (0deg); } .photo-wap .side-back {-moz-transform: rotatey (180Deg); -Webkit-Transform: Rotatey (180deg); transformée: Rotatey (180deg); } .photo-front .photo-wap {-moz-transform: rotatey (0deg); -Webkit-Transform: Rotatey (0Deg); transformée: rotatey (0deg); } .photo-back .photo-wrap {-moz-transform: rotatey (180Deg); -Webkit-Transform: Rotatey (180deg); transformée: Rotatey (180deg); } / * Style de bouton de contrôle * / .nav {width: 40%; hauteur: 30px; hauteur de ligne: 30px; Position: absolue; Gauche: 30%; En bas: 20px; Z-Index: 999; / * Background-Color: #fff; * / Text-Align: Centre; } / * Style normal * / .nav .i {width: 30px; hauteur: 30px; Affichage: bloc en ligne; curseur: pointeur; Color en arrière-plan: #AAA; Texte-aligne: Centre; Border-Radius: 50%; -Moz-transform: échelle (.48); -Webkit-transform: échelle (.48); Transformer: échelle (.48); -Webkit-Transition: Tous les 1; -Moz-Transition: Tous les 1; } .nav .i: après {} / * Style actuellement sélectionné * / .nav .i_current {-moz-transform: Scale (1); -Webkit-transform: échelle (1); } .nav .i_current: après {opacité: 1; } / * Back {-moz-transform: rotatey (-180deg); -Webkit-transform: Rotatey (-180deg); Color en arrière-plan: # 555; } / * Optimisation de style, * / .photo {/ * La définition ci-dessous est d'éliminer les flashs soudains d'images * / gauche: 50%; en haut: 50%; marge: -160px 0 0 -130px; } .photo-wrap {-moz-transform-original: 0% 50%; -Webkit-Transform-Origin: 0% 50%; } .photo-front .photo-wap {-moz-transform: tradlate (0px, 0px) rotatey (0deg); -Webkit-transform: tradlate (0px, 0px) rotatey (0deg); } .photo-back .photo-wrap {-moz-transform: tradlate (260px, 0px) rotatey (180deg); -Webkit-transform: tradlate (260px, 0px) rotatey (180deg); }Voici quelques parties importantes du style.
Paramètres dans le cas: -Webkit-Perspective: 800px;
Vous pouvez voir l'effet de la définition de ceci, puis de régler Rotatey (45DEG). Si -webkit-transform n'est pas défini, l'effet de rotation ne sera pas affiché. La rotation de l'image tourne simplement dans l'avion. S'il est réglé trop petit, l'effet sera le suivant:
div.photo est responsable de la traduction et de la rotation de l'image, tandis que div.photo-wrap est responsable de la flip 3D (commutation avant et arrière). Afin d'activer les éléments à l'intérieur pour prendre en charge les effets 3D, Set -Webkit-Transform-style: Preserve-3D pour div.photo-wap.
.Photo-wap. Style de côté -Webkit-BackFace-Visibilité: Hidden; Le but de cette phrase est de se cacher lorsque l'élément ne fait pas face à l'écran.
Afin de faire bouger l'image et de retourner l'effet d'animation, set -webkit-transition pour .photo-wap: voyons l'explication de la transition ci-dessous:
Style de barre de navigation
/ * Style normal * / .nav .i {width: 30px; hauteur: 30px; Affichage: bloc en ligne; curseur: pointeur; Color en arrière-plan: #AAA; Texte-aligne: Centre; Border-Radius: 50%; -Moz-transform: échelle (.48); -Webkit-transform: échelle (.48); Transformer: échelle (.48); -Webkit-Transition: Tous les 1; -Moz-Transition: Tous les 1; } / * Style actuellement sélectionné * / .nav .i_current {-moz-transform: échelle (1); -Webkit-transform: échelle (1); } .nav .i_current: après {opacité: 1; } / * style arrière * / .nav .i_back {-moz-transform: rotatey (-180deg); -Webkit-transform: Rotatey (-180deg); Color en arrière-plan: # 555; }Diagramme d'analyse de la barre de navigation:
Les boutons de la barre de navigation sont également divisés en avant et en arrière. Afin de distinguer les effets de l'avant et de l'arrière, ils sont définis pour avoir des couleurs d'arrière-plan différentes, et en même temps, l'effet de retournement est défini pour réduire le bouton normal - transformer: échelle (.48), et lorsque le bouton est sélectionné, échelle (1). La raison du zoom dans et hors du bouton est de savoir exactement si le style global sera détruit lorsque le bouton actuel sera sélectionné.
Une fois tous les styles de base définis, certaines optimisations seront faites à l'effet. Afin de rendre l'image légèrement décalée à droite comme une porte lors du passage à l'avant et à l'arrière, vous pouvez ajouter le style suivant:
/ * Optimisation de style, * / .photo {/ * La définition ci-dessous est d'éliminer les flashs soudains d'images * / gauche: 50%; en haut: 50%; marge: -160px 0 0 -130px; } .photo-wrap {-moz-transform-original: 0% 50%; -Webkit-Transform-Origin: 0% 50%; } .photo-front .photo-wap {-moz-transform: tradlate (0px, 0px) rotatey (0deg); -Webkit-transform: tradlate (0px, 0px) rotatey (0deg); } .photo-back .photo-wrap {-moz-transform: tradlate (260px, 0px) rotatey (180deg); -Webkit-transform: tradlate (260px, 0px) rotatey (180deg); }Section de données
Les données sont principalement écrites dans data.js. Un tableau de données est défini dans data.js pour stocker les informations de 22 images. La structure de sortie du tableau de données est la suivante:
Chaque objet stocké dans les données comprend trois attributs: Légende, DESC et IMG. Le contenu de chaque objet stocké dans les données est sorti comme suit. La pièce de données est principalement utilisée pour remplacer les chaînes dans les modèles.
Le contenu de Data.js est le suivant:
var data = []; var datastr = '1. Photo 1 <br> / <br> / Légumes verts <br> / <br> / <br> / 2. Photo 2 <br> / <br> / Photo 2 <br> / <br> / <br> / 3. Photo 3 <br> / <br> / <br> / <br> / 4. Photo 4 <br> / <br> / <br> / <br> / 4. Photo 4 <br> / <br> / <br> / 5. Photo 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, Photo 15 <br> / <br> / <br> / <br> / 16, Photo 16 <br> / <br> / <br> / <br> / 17, Photo 17 <br> / <br> / <br> / <br> / 17, Photo 17 <br> / <br> / <br> / <br> / 17, Photo 17 <br> / <br> / <br> / <br> / 17, Photo 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> 20 <br> / <br> / <br> / Photo 20 <br> / <br> / 21, Photo 21 <br> / <br> / <br> / <br> / <br> / 22, Photo 22 <br> / <br> / '; // Le code suivant est de diviser le contenu dans Datastr en la table de données var d = datastr.split (' <br> <br> <br> '); pour (var i = 0; i ++) {var c = d [i] .split ('<br> <br>'); data.push ({img: 'img' + (i + 1) + '. jpg', légende: c [0] .split (',') [1], desc: c [1]});}Contrôle de la décomposition VCD
• Sortir tous les contenus de l'affiche (modèle de vue + données)
• Contrôle d'allocation de position (position centrale, position des deux côtés)
• Sortie et contrôle de la barre de commande (commutateur, flip)
Sortez toutes les affiches, parcourez le tableau de données et remplissez le contenu dans le modèle.
// 4. Sortie toutes les affiches VAR DATA = données; fonction addphotos () {var template = $ ('# wrap'). html (); var html = []; var nav = []; pour (s dans les données) {var _html = template.replace ('{{index}}', s) .replace ('{{img}}', data [s] .img) .replace ('{{caption}}', data [s] .caption) .replace ('{{Desc}}', data [s]. html.push (_html); // Chaque affiche a un bouton correspondant nav.push ('<span id = "nav _' + s + '" onclick = "tour (this)"> </span>'); } // RECHERCHE APRÈS TRAVERSAL HTML.PUSH ('<div>' + nav.join ('') + '</div>'); $ ('# wrap'). html (html.join ('')); RSORT (Random ([0, data.length])); }Le tri de l'affiche, le diagramme d'analyse est le suivant:
Lors du tri des affiches pour les partitions gauche et droite, analysez d'abord la position des affiches pour les partitions gauche et droite comme suit:
Utilisez des nombres aléatoires pour générer la position gauche et les valeurs supérieures de l'affiche actuelle
// Créer une valeur aléatoire, prenant en charge la plage de valeur.random ([min, max]); fonction aléatoire (range) {var max = math.max (plage [0], plage [1]); var min = math.min (plage [0], plage [1]); var diffe = max-min; var nombre = math.ceil (math.random () * diff + min); numéro de retour; } // 6. Calculez la plage des partitions gauche et droite {gauche: {x: [min, max], y [min, max]}, droit {x: [min, max], y: [min, max]}} function gamme () {var ran = {Left: {x: [], y: []}, à droite: {x: [], y: []}}; var wrap = {w: $ ('# wrap'). width (), // w: 600, h: $ ('# wrap'). height ()} var photo = {w: $ ('. Photo') [0] .clientWidth, h: $ ('. Photo') [0] .ClientHeight} ran.left.x = [0 - Photo.W, wrap.W / 2 - Photo.w / 2]; 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; le retour a couru; }Puis triez les affiches
//5. 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 * photo-front / s * /, ''); _Photo [i] .classname = _photo [i] .classname.replace (// s * photo-front / s * /, ''); _Photo [i] .classname = _photo [i] .classname = _photo [i] .classname.replace (// s * photo-back / s * /, ''); // Parce que Photo-front et Photo-back sont remplacés ci-dessus, _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) Scale (1.3)'; Photos.push (_photo [i]); } // var Photo_Center = $ ('# Photo _' + n) [0]; var Photo_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); // Divisez l'affiche restante en deux parties var photos_left = photos.splice (0, math.ceil (photos.length / 2)); var photos_right = photos; var gammes = range (); // Tri de partition gauche pour (s dans 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) échelle (1)'; } // Right Partition Sort for (s in 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) Scale (1)';; } // Le traitement du bouton de contrôle Var Navs = $ ('. I'); pour (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 * /, ''); } // ajouter i_current style $ ('# nav _' + n) [0] .classname + = 'i_current'; }L'effet de commutation de l'avant et de l'arrière de l'affiche et l'effet de commutation du bouton de commande:
Fonction Turn (elem) {var cls = elem.classname; var n = elem.id.split ('_') [1]; if (! (/ Photo_Center / .Test (CLS))) {RSORT (n); } // Le nom de classe est modifié après l'exécution de l'instruction if ci-dessus, car je ne veux pas que cela // il y a toujours un manque de classe photo_center var cs = $ ('# Photo _' + n) [0]; CLS = cs.classname; if (/photo-front/.test (CLS)) {CLS = Cl.replace (/ Photo-front /, 'Photo-Back'); $ ('# nav _' + n) [0] .classname + = 'i_back'; } else {cls = cls.replace (/ photo-back /, 'photo-front') $ ('# nav _' + n) [0] .classname = $ ('# nav _' + n) [0] .classname.replace (// s * i_back / s * /, ''); } cs.classname = CLS; }Vous pouvez comprendre quelle affiche est l'affiche actuellement affichée basée sur n dans rsort (n), et vous pouvez également savoir quel bouton est le bouton actuellement sélectionné.
Ce qui précède est l'analyse d'effet correspondante.
Résumer:
Idées et méthodes d'analyse des cas:
• Méthode d'analyse des modules
• Méthode d'analyse VCD
Quelques nouveaux effets CSS
• Paramètres de position de vue 3D et sous-éléments 3D Prise en charge
• Cacher lorsqu'il est retourné invisible
• Utiliser la rotation CSS (axe y) et le déplacement
• Animation de commutation CSS
Compétences de script front-end
• Fonction de modèle simple pour le remplacement des chaînes
• Obtenez des nombres aléatoires selon la plage
• Utilisez des scripts pour changer le nom de classe de l'élément et les attributs de style spécifiques
Pendant le processus de mise en œuvre, un problème que j'ai rencontré était que lors du retournement de l'image, le côté inverse ne peut pas être caché dans Firefox. C'est-à-dire qu'il y a un problème avec le code suivant, et il a été vérifié pendant longtemps.
.photo-wap .side {-moz-backface-visibilité: Hidden; -Webkit-BackFace-Visibilité: Hidden; backface-visibilité: caché;}Il s'avère que c'est: j'ai raté le style Transform: Preserve-3d . Donc, lorsque la compatibilité du navigateur, n'oubliez pas d'écrire des styles sans préfixe
.Photo-wrap {position: Absolute; Largeur: 100%; hauteur: 100%; -Moz-Transform-style: Perserve-3D; -Webkit-Transform-style: Preserve-3d; / * Laissez les éléments à l'intérieur prennent en charge l'effet de 3d * / <span style = "Color: # CC0000;"> Transform-Style: Preserve-3d; / * En raison de cette phrase, le dos de Firefox ne peut pas être affiché * / </pan> -webkit-transition: tous les 1; -Moz-Transition: Tous les 1; Transition: Tous les 1; }Enfin, le code JS complet est joint:
<script type = "text / javascript"> // générer une valeur aléatoire au hasard, prenant en charge la plage de valeur.random ([min, max]); fonction aléatoire (range) {var max = math.max (plage [0], plage [1]); var min = math.min (plage [0], plage [1]); var diffe = max-min; var nombre = math.ceil (math.random () * diff + min); numéro de retour; } // 4. Sortie toutes les affiches VAR DATA = données; fonction addphotos () {var template = $ ('# wrap'). html (); var html = []; var nav = []; pour (s dans les données) {var _html = template.replace ('{{index}}', s) .replace ('{{img}}', data [s] .img) .replace ('{{caption}}', data [s] .caption) .replace ('{{Desc}}', data [s]. html.push (_html); // Chaque affiche a un bouton correspondant nav.push ('<span id = "nav _' + s + '" onclick = "tour (this)"> </span>'); } html.push ('<v>' + nav.join ('') + '</div>'); $ ('# wrap'). html (html.join ('')); RSORT (Random ([0, data.length])); } addphotos () // 6. Calculez la plage des partitions gauche et droite {gauche: {x: [min, max], y [min, max]}, droit {x: [min, max], y: [min, max]}} function gamme () {var ran = {Left: {x: [], y: []}, à droite: {x: [], y: []}}; var wrap = {w: $ ('# wrap'). width (), // w: 600, h: $ ('# wrap'). height ()} var photo = {w: $ ('. Photo') [0] .clientWidth, h: $ ('. Photo') [0] .ClientHeight} ran.left.x = [0 - Photo.W, wrap.W / 2 - Photo.w / 2]; 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; le retour a couru; } // 5. Trier la fonction de l'affiche 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 * photo-front / s * /, ''); _Photo [i] .classname = _photo [i] .classname.replace (// s * photo-back / s * /, ''); _Photo [i] .classname = _photo [i] .classname.replace (// s * photo-back / s * /, ''); // Parce que ce qui précède a remplacé à la fois photo-front et 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) Scale (1.3)'; Photos.push (_photo [i]); } // var Photo_Center = $ ('# Photo _' + n) [0]; var Photo_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); // divisant l'affiche restante en deux parties var photos_left = photos.splice (0, math.ceil (photos.length / 2)); var photos_right = photos; var gammes = range (); // Tri de partition gauche pour (s dans 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) échelle (1)'; } // Tri de partition droite pour (s dans 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'] = 'rotate (' + random ([- 100,100]) + 'deg) échelle (1)'; } // Le traitement du bouton de contrôle Var Navs = $ ('. I'); pour (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 * /, ''); } // ajouter i_current style $ ('# nav _' + n) [0] .classname + = 'i_current'; } fonction tour (elem) {var cls = elem.classname; var n = elem.id.split ('_') [1]; if (! (/ Photo_Center / .Test (CLS))) {RSORT (n); } // Le nom de classe est modifié après l'exécution de l'instruction if ci-dessus, car je ne veux pas de ce // la classe photo_cente var cs = $ ('# Photo _' + n) [0]; CLS = cs.classname; if (/photo-front/.test (CLS)) {CLS = Cl.replace (/ Photo-front /, 'Photo-Back'); $ ('# nav _' + n) [0] .classname + = 'i_back'; } else {cls = cls.replace (/ photo-back /, 'photo-front') $ ('# nav _' + n) [0] .classname = $ ('# nav _' + n) [0] .classname.replace (// s * i_back / s * /, ''); } cs.classname = CLS; } </ script>Ce qui précède est tout le contenu de cet article. J'espère que cela sera utile à l'apprentissage de tous et j'espère que tout le monde soutiendra davantage Wulin.com.