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
<script src= "Jquery.js" ></script>
<script src= "Jquery.backstretch.js" ></script>
2. The style used by the test
Body {font-family: Microsoft ya Black; line-height:1.3em;-webkit-font-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:3px;
-moz-border-radius:3px;
border-radius:3px;
}
Pre {border:1px solid #CCC background-color: #EEE; color: #333; padding:10px; overflow:scroll;}
code {padding:2px 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;
Background:rgba (0,0,0,0.7);
Other Div p {padding:10px;}
3. Use of JS. Plug-ins are very simple to use.
$ (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.