Rumah >hujung hadapan web >tutorial js >Pelaksanaan bukan jQuery bagi foto yang bertaburan di atas meja, klik untuk membesarkan kemahiran LightBox effect_javascript

Pelaksanaan bukan jQuery bagi foto yang bertaburan di atas meja, klik untuk membesarkan kemahiran LightBox effect_javascript

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBasal: 2016-05-16 16:29:431643semak imbas

Rendering adalah seperti berikut

Alamat demohttp://xueduany.github.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.html

Prinsip pelaksanaannya sangat mudah, html asas adalah seperti berikut

Salin kod Kod adalah seperti berikut:

alam semula jadi biru-hijau

2-strok payudara

;

;
…

Tentukan dahulu alas meja, iaitu, div id="gallery"

Kemudian susun lajur menegak album foto mengikut tertib, div class="item", dan gunakan pautan untuk membalut gambar

Seterusnya, kita perlu mencapai kesan penyebaran foto,

Salin kod

Kod adalah seperti berikut:

$k(fungsi() {

$k('.item', $k('#gallery')).setiap(fungsi() {

$k(this).css({

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

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

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

Di sini $k ialah kaedah penulisan kit, yang serupa dengan jQuery's $. Maksud kod ini adalah untuk mencari div semua item, menetapkannya kepada kedudukan mutlak, gunakan alas meja tinggi dan lebar, jana nombor rawak dan susunkannya Untuk css3, gunakan atribut putaran unik css3 effect'rotate untuk memutar sudut tertentu

Pada masa ini, foto mula tersebar, mencapai kesan Rajah 1. Seterusnya kita akan melakukan kesan LightBox,

Salin kod Kod adalah seperti berikut:

$k(fungsi() {

$k('.item', $k('#gallery')).setiap(fungsi() {

$k(this).css({

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

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

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

});

}).pushStack('a.kitLightBox').setiap(fungsi() {

$kit.ui.LightBox baharu({

el : ini

}).init();

});

});

Kod lengkap adalah seperti di atas Untuk pautan setiap imej, gunakan widget UI kotak cahaya kitjs untuk membuat seketika Kesan yang diperolehi boleh diklik dan imej akan dibuka sebagai imej besar dengan kesan animasi. ^_^Semoga anda semua selamat menggunakannya!

Kod sumber LightBox https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/widget/LightBox/lightbox.js

Kod sumber kesan taburan foto https://github.com/xueduany/KitJs/blob/master/KitJs/demo/Lightbox-Gallery/demo.html

Artikel ini adalah berdasarkan rangka kerja KITJS Jika anda tidak begitu mengetahuinya, maka dalam artikel berikut, kami akan memperkenalkan rangka kerja js yang hebat ini secara terperinci.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Beberapa pendapat tentang kemahiran teknologi_javascript memuatkan modul javascriptArtikel seterusnya：Beberapa pendapat tentang kemahiran teknologi_javascript memuatkan modul javascript

Artikel berkaitan

Lihat lagi