jQuery plug-in bgStretcher.js implements full-screen background effects_jquery

bgStretcher 2011 (Background Stretcher) is a jQuery plug-in that can add multiple background images to your web page, and multiple background images can be automatically switched. At the same time, the size of the background image can adapt to the size of the browser window. The switching effects of the background image include fade in and fade out, scrolling, and slideshow. When scrolling and slideshow are selected, you can choose the direction, up, down, left, or right, or top left, right bottom, right top, left bottom. The picture switching order can also be set to forward, reverse or random. More options are up to you to research slowly.

bgStretcher is a jQuery plug-in that allows you to add a large image (or a group of images) to the background of your web page and will resize the image proportionally to fill the entire window area. This plugin will act as a slideshow if using multiple image modes (the speed and duration of the slideshow is configurable).

Plug-in features:

The script file is simple and easy to set up; supports all new browsers; supports single or multiple images.

Plugin usage:

First of all, of course you need to download the plug-in first. The plug-in package already contains the required JS files.

Then, insert the following code between and

<link rel="stylesheet" type="text/css" href="./main.css" />
<link rel="stylesheet" type="text/css" href="../bgstretcher.css" />
<script type="text/javascript" src="../jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="../bgstretcher.js"></script>

Then insert the following code after the above code to initialize the bgStretcher plug-in. You need to tell which element the plug-in works on and configure the plug-in options. Likewise, be careful not to make mistakes with the image paths in the code.

<script type="text/javascript">
 $(document).ready(function(){
 
  // Initialize Backgound Stretcher 
 $('.demoo').bgStretcher({
 images: ['images/sample-1.jpg', 'images/sample-2.jpg', 'images/sample-3.jpg', 'images/sample-4.jpg', 'images/sample-5.jpg', 'images/sample-6.jpg'],
 imageWidth: 800, 
 imageHeight: 400, 
 slideDirection: 'N',
 slideShowSpeed: 1000,
 transitionEffect: 'fade',
 sequenceMode: 'normal',
 });
 
 });
</script>

This plug-in is not only used for the background of the entire web page, but can also be used for a certain web page element. Of course, at least this element can set the background, such as DIV and so on. The web page element is selected through ID or Class. The element name BODY should be the only element name in the web page, which means setting the background for the entire web page. If you are setting the background for a certain DIV block on the page, you need to define an ID for the DIV or know its style class name. The ID and class name should be unique, otherwise the effect will be amazing.

Plug-in options:

Plug-in method:

Method name Method description
$(objID).bgStretcher.play()                                                                                         $(objID).bgStretcher.pause()                                                                                                             $(objID).bgStretcher.sliderDestroy() Destroy background slideshow

MS Internet Explorer 6, 7, 8, 9

Opera 9
Apple Safari
Google Chrome

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