JQuery background plug-in backstretch User Guide, jquerybackstretch

JQuery background plug-in backstretch User Guide, jquerybackstretch

I. backstretch plug-in Function

Optimize the website appearance. It is mainly used to set page background images, or to set background images of html elements. You can set multiple background images and display them cyclically at intervals.

Note

However, when setting a background image, if the image is too large and the resources used by the website are restricted, the image size should be compressed. Otherwise, the image loading will be very slow. I tested the demo on the official website. The images are relatively large. Some images are larger than kb. Opening a website in a virtual space slows down image loading.

The plug-in demo effect is not obvious, so it is not posted in this article. You can go to the official demo, or below this article, there are also examples for testing this plug-in. You can take a look, demonstration in Chinese.

The image used in the test case comes from the network and is larger than kb. Use an official image. The image is not compressed because it is only used by the test plug-in.

Ii. Official backstretch address

Official Address has plug-in detailed instructions for use, official address: https://github.com/srobbin/jquery-backstretch

Iii. backstretch usage

1. reference file
<Script src = "jquery. js"> </script>
<Script src = "jquery. backstretch. js"> </script>
2. style used for testing

Body {font-family:; 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.7, 0 );}. other div p {padding: 10px ;}

3. js used. Plug-ins are easy to use.

$ (Function () {$ (". container "cmd.css ({opacity :. 8}); // sets the transparency $. backstretch (["bg.jpg"]); // background $ (". other "). backstretch (["B .jpg", "a.jpg", "coffee.jpg"], {duration: 4000}); // element background, switch to reality });

In fact, there are many ways to customize the webpage background. In addition to the powerful jQuery, we can also use some cases of jQuery's image switching effect to modify and implement dynamic image switching, finally, I hope you will like it!

The above is all the content of this article. I hope you will like it.