テーブル上に散在する写真の非 jQuery 実装。クリックして拡大します。LightBox 効果_JavaScript スキル

レンダリングは次のとおりです

デモのアドレスhttp://xueduany.github.io/KitJs/KitJs/demo/Lightbox-Gallery/demo.html

実装原理は非常にシンプルで、基本的な HTML は次のとおりです

コードをコピーします コードは次のとおりです:

                                                                                                                                                           
                                                                                                                                                                      ブルー、グリーン、ネイチャー
                                                                                                                                                                                                                                                                                                                                                                                                           
                                                                                                                                                                      ２回平泳ぎ
                                                                                                                                                                                                                                                                                                                                                                                                            ＆lt; a class = "kitlightbox" href = "img/original/farm.jpg" = "_ blank"＆gt;＆lt; img src = "img/thumbs/farm.jpg"＆gt;＆lt;/a＆gt;
                                                                                                                                                                      農場
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  バーンホフ
                                                                                                                                                                                                                                               
…



最初にテーブルクロス、つまり div id="gallery" を定義します

次に、フォト アルバムの縦列を順番に配置し (div class="item")、写真を内側のリンクで囲みます

次に、写真の分散効果を実現する必要があります。





コードをコピーします

コードは次のとおりです:

$k(function() {

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

$k(this).css({

トップ : $kit.math.rand($k('#gallery').innerHeight()) 'px',

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

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

});

})

ここで $k は jQuery の $ に似た kit の書き方です。API は全く同じです。このコードの意味は、すべての項目の div を検索し、それらを絶対位置に設定し、テーブルクロスを使用することです。高さと幅を乱数生成して配置します。 css3 の場合は、css3 独自の回転効果である rotate 属性を使用して、一定の角度を回転させます

この時点で、写真が広がり始め、図 1 の効果が得られます。次に、ライトボックス効果を実行します。

コードをコピーします コードは次のとおりです:

$k(function() {
$k('.item', $k('#gallery')).each(function() {
$k(this).css({
トップ : $kit.math.rand($k('#gallery').innerHeight()) 'px',
左: $kit.math.rand($k('#gallery').innerWidth()) 'px',
'-webkit-transform' : 'rotate(' $kit.math.rand(-40, 40) 'deg)'
});
}).pushStack('a.kitLightBox').each(function() {
new $kit.ui.LightBox({
エル：これ
}).init();
});
});

各画像のリンクは、kitjs のライトボックス UI ウィジェットを使用してインスタンス化します。クリックすると、画像がアニメーション効果付きの大きな画像として開きます。 ^_^皆様のご利用を心よりお祈り申し上げます!

LightBox ソース コード https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/widget/LightBox/lightbox.js

写真散乱エフェクトのソース コード https://github.com/xueduany/KitJs/blob/master/KitJs/demo/Lightbox-Gallery/demo.html

この記事は KITJS フレームワークに基づいています。よく知らない方のために、次の記事でこの優れた JS フレームワークについて詳しく紹介します。

このウェブサイトの声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。