Non-jquery implementation photo strewn on the table, click to enlarge the Lightbox effect _javascript tips

The effect chart is as follows

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

The implementation principle is very simple, the basic HTML is as follows

Copy Code code as follows:

<div id= "Gallery" >
<div class= "Item" >
<a class= "Kitlightbox" href= "img/original/blue-green-nature.jpg" target= "_blank" ></a>
<div class= "desc" >
Blue-green-nature
</div>
</div>
<div class= "Item" >
<a class= "Kitlightbox" href= "img/original/2-breast-stroke.jpg" target= "_blank" ></a>
<div class= "desc" >
2-breast-stroke
</div>
</div>
<div class= "Item" >
<a class= "Kitlightbox" href= "img/original/farm.jpg" target= "_blank" > </a>
<div class= "desc" >
Farm
</div>
</div>
<div class= "Item" >
<a class= "Kitlightbox" href= "img/original/bahnhoff.jpg" target= "_blank" ></a>
<div class= "desc" >
Bahnhoff
</div>
</div>

......

First define a tablecloth, which is the div id= "Gallery"

Then in order, arrange a vertical album, div class= "item", inside with a link to the picture wrapped up

Next, we want to achieve the dispersion effect of the photo,

Copy Code code as follows:

$k (function () {
$k ('. Item ', $k (' #gallery '). each (function () {
$k (this). CSS ({
Top: $kit. Math.rand ($k (' #gallery '). Innerheight ()) + ' px ',
Left: $kit. Math.rand ($k (' #gallery '). Innerwidth ()) + ' px ',
'-webkit-transform ': ' Rotate (' + $kit. Math.rand ( -40) + ' deg ') '
});
})

Here is the $k is the kit, like jquery $,api exactly the same, this code means to find all the item div, set to absolute positioning, with a tablecloth high width, generate random number, arrangement, for CSS3, Use the CSS3-specific rotation effect ' rotate property to rotate a certain angle

At this time, the photos began to spread out, to achieve the effect of Figure 1, next we have to do a lightbox effect,

Copy Code code as follows:

$k (function () {
$k ('. Item ', $k (' #gallery '). each (function () {
$k (this). CSS ({
Top: $kit. Math.rand ($k (' #gallery '). Innerheight ()) + ' px ',
Left: $kit. Math.rand ($k (' #gallery '). Innerwidth ()) + ' px ',
'-webkit-transform ': ' Rotate (' + $kit. Math.rand ( -40) + ' deg ') '
});
}). Pushstack (' A.kitlightbox '). each (function () {
New $kit. Ui.lightbox ({
El:this
). Init ();
});
});

Complete code as above, for each picture of a link, using the Kitjs lightbox UI widget instantiation, the effect can be clicked, animation effect of the open picture large image. ^_^ Wish you a happy use!

LightBox Source Code Https://github.com/xueduany/KitJs/blob/master/KitJs/src/js/widget/LightBox/lightbox.js

Photo Scatter effect Source code https://github.com/xueduany/KitJs/blob/master/KitJs/demo/Lightbox-Gallery/demo.html

This article is based on the KITJS framework to achieve, the small partners if not very understanding, then the next article, we will elaborate on this very good JS framework.