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

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

WBOY

Libérer： 2016-05-16 16:29:43

original

1595 Les gens l'ont consulté

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.