Implémentation non jQuery de photos dispersées sur la table, cliquez pour agrandir les compétences LightBox effect_javascript

Le rendu est le suivant

Adresse de démonstrationhttp://xueduany.github.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.html

Le principe de mise en œuvre est très simple, le html de base est le suivant

Copier le code Le code est le suivant :

                                                                                                                                                           
                                                                                                                                                                                             bleu-vert-nature
                                                                                                                                                                                                                                                                                                                                                                                         
                                                                                                                                                                                             2 brasses
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       
                                                                                                                                                                      ferme
                                                                                                                                                                                                                                                                                                                                                                                                                 
                                                                                                                                                                      Bahnhoff
                                                                                                                                                                                                                             
 … 



Définissez d'abord une nappe, c'est-à-dire div id="gallery"

Ensuite, disposez une colonne verticale d'albums photo dans l'ordre, div class="item", et enveloppez les photos avec un lien à l'intérieur

Ensuite, nous devons obtenir l'effet de dispersion de la photo,





Copier le code

Le code est le suivant :

$k(fonction() {

$k('.item', $k('#gallery')).each(function() {

$k(this).css({

haut : $kit.math.rand($k('#gallery').innerHeight()) 'px',

gauche : $kit.math.rand($k('#gallery').innerWidth()) 'px',

'-webkit-transform' : 'rotate(' $kit.math.rand(-40, 40) 'deg)'

});

})

Ici $k est la méthode d'écriture du kit, qui est similaire au $ de jQuery. L'API est exactement la même. La signification de ce code est de trouver les divs de tous les éléments, de les mettre en positionnement absolu, d'utiliser la nappe. hauteur et largeur, générez des nombres aléatoires et organisez-les pour CSS3, utilisez l'attribut rotation effect'rotate unique de CSS3 pour faire pivoter un certain angle

.

À ce moment-là, les photos ont commencé à s'étaler, obtenant l'effet de la figure 1. Ensuite, nous ferons l'effet LightBox,

Copier le code Le code est le suivant :

$k(fonction() {
$k('.item', $k('#gallery')).each(function() {
$k(this).css({
haut : $kit.math.rand($k('#gallery').innerHeight()) 'px',
gauche : $kit.math.rand($k('#gallery').innerWidth()) 'px',
'-webkit-transform' : 'rotate(' $kit.math.rand(-40, 40) 'deg)'
});
}).pushStack('a.kitLightBox').each(function() {
nouveau $kit.ui.LightBox({
el : ceci
}).init();
});
});

Le code complet est comme ci-dessus. Pour le lien de chaque image, utilisez le widget lightbox UI de kitjs pour l'instancier. L'effet obtenu peut être cliqué et l'image sera ouverte comme une grande image avec effet d'animation. ^_^Je vous souhaite à tous une bonne utilisation !

Code source de LightBox https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/widget/LightBox/lightbox.js

Code source de l'effet de dispersion des photos https://github.com/xueduany/KitJs/blob/master/KitJs/demo/Lightbox-Gallery/demo.html

Cet article est basé sur le framework KITJS. Si vous ne le connaissez pas très bien, alors dans l'article suivant, nous présenterons en détail ce formidable framework js.

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn