Heim >Web-Frontend >js-Tutorial >Nicht-jQuery-Implementierung von auf dem Tisch verstreuten Fotos. Klicken Sie, um die LightBox-Effekt_Javascript-Fähigkeiten zu vergrößern

Nicht-jQuery-Implementierung von auf dem Tisch verstreuten Fotos. Klicken Sie, um die LightBox-Effekt_Javascript-Fähigkeiten zu vergrößern

WBOYOriginal: 2016-05-16 16:29:431598Durchsuche

Das Rendering ist wie folgt

Demo-Adressehttp://xueduany.github.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.html

Das Implementierungsprinzip ist sehr einfach, das grundlegende HTML lautet wie folgt

Code kopieren Der Code lautet wie folgt:

blau-grün-natur

2-Brust-Schwimmen

Bauernhof

bahnhoff

…

Definieren Sie zunächst eine Tischdecke, also div id="gallery"

Ordnen Sie dann eine vertikale Spalte mit Fotoalben der Reihe nach an, div class="item", und verwenden Sie einen Link, um die Bilder einzuschließen

Als nächstes müssen wir den Dispersionseffekt des Fotos erzielen,

Code kopieren

Der Code lautet wie folgt:

$k(function() {

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

$k(this).css({

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

links: $kit.math.rand($k('#gallery').innerWidth()) 'px', '-webkit-transform': 'rotate(' $kit.math.rand(-40, 40) 'deg)' }); })

Hier ist $k die Schreibmethode von kit, die der von jQuery ähnelt. Die API ist genau die gleiche. Die Bedeutung dieses Codes besteht darin, die Divs aller Elemente zu finden, sie auf absolute Positionierung zu setzen und die Tabelle zu verwenden Höhe und Breite, generieren Sie Zufallszahlen und ordnen Sie sie an. Verwenden Sie für CSS3 das einzigartige Rotationseffekt-Attribut „Rotate“, um einen bestimmten Winkel zu drehen

Zu diesem Zeitpunkt begannen sich die Fotos auszubreiten und erzielten den Effekt von Abbildung 1. Als nächstes werden wir den LightBox-Effekt ausführen,

Code kopieren Der Code lautet wie folgt:

$k(function() {

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

$k(this).css({

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

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

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

});

}).pushStack('a.kitLightBox').each(function() {

neues $kit.ui.LightBox({

el: das

}).init();

});

});

Der vollständige Code ist wie oben. Verwenden Sie für den Link zu jedem Bild das Lightbox-UI-Widget von kitjs, um es zu instanziieren. Der erhaltene Effekt kann angeklickt werden und das Bild wird als großes Bild mit Animationseffekt geöffnet. ^_^Wünsche euch allen viel Spaß!

LightBox-Quellcode https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/widget/LightBox/lightbox.js

Quellcode für den Fotostreuungseffekt https://github.com/xueduany/KitJs/blob/master/KitJs/demo/Lightbox-Gallery/demo.html

Dieser Artikel basiert auf dem KITJS-Framework. Wenn Sie es nicht sehr gut kennen, stellen wir Ihnen dieses großartige js-Framework im Detail vor.

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Einige Gedanken zum Laden von Javascript-Modulen. Technologie_Javascript-KenntnisseNächster Artikel：Einige Gedanken zum Laden von Javascript-Modulen. Technologie_Javascript-Kenntnisse

In Verbindung stehende Artikel

Mehr sehen