Use non-jQuery to scatter photos on the table, and click to enlarge the LightBox effect _ javascript tips-js tutorial

This article will introduce you to the LightBox Effect of clicking and enlarging images on the scattered photos of js implementation table. It is very cool and non-jQuery implementation. If you need it, you can refer to the following:

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:

The Code is as follows:

Blue-green-nature

2-breast-stroke

Farm

Bahnhoff

......

Define a tablecloth, that is, p id = "gallery"

Then, sort the photo albums in the vertical column in order, p class = "item", which uses a link to package the image.

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

The Code is as follows:

$ K (function (){
$ K ('. item', $ k (' # gallery '). each (function (){
Javask(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, 40) + 'deg )'
});
})

Here $ k is the method of kit, similar to jQuery's $, and the API is exactly the same. This code refers to finding the p of all items and setting it to absolute positioning. the height and width of the tablecloth are used, generate random numbers and arrange them. For css3, use the rotate attribute unique to css3 to rotate a certain angle.

At this time, the photos began to be dispersed to achieve the effect. Next, let's do the LightBox effect,

The Code is as follows:

$ K (function (){
$ K ('. item', $ k (' # gallery '). each (function (){
Javask(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, 40) + 'deg )'
});
}). PushStack ('A. kitlightbox'). each (function (){
New $ kit. ui. LightBox ({
El: this
}). Init ();
});
});

The complete code is as above. For the link of each image, use the lightbox UI widget of kitjs to instantiate the image, and click the desired effect. The animation effect is used to open the image. ^_^ Have a good time!

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

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

This article is based on the KITJS framework. If you are not familiar with it, we will introduce this great js framework in detail in subsequent articles.