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

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

WBOY

リリース： 2016-05-16 16:29:43

オリジナル

1592 人が閲覧しました

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

デモのアドレス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;
                                                                                                                                                                      農場
                                                                                                                                                                                                                                                                                    テーブル上に散在する写真の非 jQuery 実装。クリックして拡大します。LightBox 効果_JavaScript スキル

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

バーンホフ

…

最初にテーブルクロス、つまり 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 フレームワークについて詳しく紹介します。