jQuery background plug-in backstretch usage guide_jquery

1. backstretch plug-in function

Optimize website appearance. It is mainly used to set the background image of the page, and can also set the background image of the html element. Multiple background images can be set and displayed in cycles within an interval.

Note

But 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 loading will be very slow. I tested the demo of the official website. The pictures are relatively large, and some pictures are more than 400kb. When the website is opened in the virtual space, the picture loading is a bit slow.

The screenshot effect of the plug-in demo is not obvious, so I will not post it in this article. You can go to the official demo to see it, or below this article, there are also use cases where I tested this plug-in. You can take a look at the Chinese demo.

The pictures used in the test cases come from the Internet, and the size is more than 100kb. Use an official picture. Since it is just a test plug-in, the images are not compressed.

2.backstretch official address

There are detailed instructions for using the plug-in at the official address: https://github.com/srobbin/jquery-backstretch

3. How to use backstretch

1. Reference files


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

3. js used. The plugin is very simple to use.

$(function(){
  $(".container").css({ opacity: .8 });  //设置透明度
  $.backstretch(["bg.jpg"]); //背景
  $(".other").backstretch(["b.jpg","a.jpg","coffee.jpg"],{duration:4000}); //元素背景，切换现实
});

In fact, there are many ways to customize the background of a web page. With the power of jQuery, we can also use some examples of image switching effects implemented by jQuery to modify and implement dynamic image switching. Finally, I hope you all like it!

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