Home  >  Article  >  Web Front-end  >  jQuery plug-in bgStretcher.js implements full-screen background effects_jquery

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

WBOY
WBOYOriginal
2016-05-16 15:56:201574browse

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 93f0f5c25f18dab9d176bd4f6de5d30e and 9c3bca370b5104690d9ef395f2c5f8d1 of your web page, so that the plug-in can be used later. Pay attention to the path in the code. As for whether it is a relative path or an absolute path, it depends on your actual needs. .

<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:

Configuration Options Default value Option Description
imageContainer bgstretcher bgStretcher will automatically build structure for the images list in a DOM tree. This parameter is ID for the images holder. Try inspecting the tree with a FireBug to get an idea how it's constructed.
resizeProportionally true Indicates if background image(s) will be resized proportionally or not.
resizeAnimate false Indicates if background image(s) will be resized with animation. (Be careful, this may slow down some PCs if your images are large.)
images empty An array containing list of images to be displayed on page's background.
imageWidth 1024 Original image's width.
imageHeight 768 Original image's height.
maxWidth auto Maximum image's width.
maxHeight auto Maximum image's height.
nextSlideDelay 3000 (3 seconds) Numeric value in milliseconds. The parameter sets delay until next slide should start.
slideShowSpeed normal Numeric value in milliseconds or jQuery string value (‘fast', ‘normal', ‘slow'). The parameter sets the speed of transition between images.
slideShow true Allows or disallows slideshow functionality.
transitionEffect fade Transition effect (use also: none, simpleSlide, superSlide).
slideDirection N Slide Diraction: N – north, S – south, W – west, E – East (if transitionEffect = superSlide use also: NW, NE, SW, SE).
sequenceMode normal Sequence mode (use also: back, random)
buttonPrev empty Previous button CSS selector
buttonNext empty Next button CSS selector
pagination empty CSS selector for pagination
anchoring ‘left top' Anchoring bgStrtcher area regarding window
anchoringImg ‘left top' Anchoring images regarding window
preloadImg false For Preload images use true
stratElementIndex 0 Start element index
callbackfunction null Name of callback function

Plug-in method:

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

Browser compatibility:


MS Internet Explorer 6, 7, 8, 9

Mozilla Firefox 2, 3, 4

Opera 9
Apple Safari
Google Chrome

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

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn