jQuery background plugin backstretch user guide

1.backstretch plug-in function

Optimize the look and feel of your site. It is mainly used to set the background image of the page, but you can also set the background image of the html element. Background images can be set up multiple times and displayed in a loop at intervals.

note

However, when setting the background image, if the image is too large and the resources used by the website are limited, the size of the image should be compressed. Otherwise the image will load very slowly. I have tested the demo of the official website, and the pictures are all large. Some pictures are more than 400kb. When I open the website in the virtual space, the pictures are a little slow to load.

The screenshot of the plug-in demo is not obvious, so it is not posted in this article. You can go to the official demo demo, or at the bottom of this article, there is also a use case for me to test this plug-in, you can see 1, the Chinese demo.

The test case used pictures from the network, and the size of all above 100kb, use one official picture. Images are not compressed because they are used only for testing plug-ins.

2. backstretch official address

Official address detailed instructions have a plug-in, the official address: https: / / github com/srobbin/jquery - backstretch

3. Usage of backstretch

1. Reference documents
< script src="jquery.js" > < /script >
< script src="jquery.backstretch.js" > < /script >
2. Test the style used

body { font-family:  Microsoft jas 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. js used. Plugins are easy 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, switch reality 
});

In fact, there are many ways to customize the page background, in addition to the powerful jQuery, we can also use jQuery to achieve some picture switching effect of the case to modify and achieve dynamic picture switching, finally hope you like!

That's all for this article, I hope you enjoy it.