jquery Background Plugin backstretch usage Guide

Backstretch is a simple jquery plugin, can help you to add a dynamic background image to the page, you can automatically resize the size of the screen, of course, the disadvantage is that when the picture size is smaller than the screen, the picture will be due to the automatic extension and deformation, So we can use the high resolution large size of the picture to do the background, more importantly, to support the automatic switching of pictures

A. Backstretch plug-in function

Optimize the appearance of the site. Mainly used to set the background picture of the page, you can also set the background image of HTML elements. The background picture can be set more than once, in the interval of the loop display.

Note

However, when setting a background picture, if the picture is too large and the resources used by the site are limited, the size of the picture should be compressed. Otherwise the picture will load very slowly. I tested the official website demo, pictures are relatively large, some pictures in 400kb or more, in the virtual space to open the site, the picture load a bit slow.

Plug-in demo screenshot effect is not obvious, so it is not posted in this article, you can go to the official to see demo demo, or under this article, there are also I test this plug-in use case, you can see, Chinese demo.

The pictures used by the test cases come from the network, and the size is above 100kb, using one of the official pictures. The picture is not compressed because it is only used by the Test plug-in.

Two. Backstretch official address

The official address has the details of the use of Plug-ins, official address: Https://github.com/srobbin/jquery-backstretch

Three. Backstretch use method

1. Reference file

　　

　　

2. The style used by the test

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The

body {font-family: Microsoft ya hei; line-height:1.3em;-webkit-fo nt-smoothing:antialiased; }. Container {width:90% margin:20px auto; Background-color: #FFF; padding:20px;} h1{font-weight:normal; Pre, code {Font-family:monaco, Menlo, Consolas, "Courier New", monospace; font-size:12px; color: #333;-webkit-border-radius:3p X -moz-border-radius:3px; border-radius:3px; Pre {border:1px solid #CCC; Background-color: #EEE; color: #333; padding:10px; overflow:scroll;} code {PADDING:2P x 4px; Background-color: #F7F7F9; border:1px solid #E1E1E8; Color: #D14; "Other {height:300px; color: #FFF;}" other div {position:absolute; bottom:0; width:100%; background: #000; backgr Ound:rgba (0,0,0,0.7); }. Other div p {padding:10px;}

3. Use of JS. Plug-ins are very simple to use.

?

1 2 3 4 5

$ (function () {$ ('. Container '). CSS ({opacity:. 8});//Set Transparency $.backstretch (["bg.jpg"]);//Background $ (". Other"). Backstretch ([" B.jpg "," a.jpg "," Coffee.jpg "],{duration:4000}); Element background, toggle Reality});

In fact, there are many ways to customize the background of the Web page, in addition to the powerful jquery, we can also use jquery to achieve some of the picture switching effect of the case to modify and realize the dynamic picture of the switch, and finally hope everyone likes!

The above mentioned is the entire content of this article, I hope you can enjoy.