JQuery plug-in bgStretcher. js implements full-screen background Effects

JQuery plug-in bgStretcher. js implements full-screen background Effects

The jQuery plug-in bgstretcher of the webpage background image can be automatically and dynamically changed. this plug-in recommended by js and sharejs.com allows you to customize multiple methods to automatically switch the webpage background. The effect is smooth and rare, and the calling code is also very simple.

BgStretcher 2011 (Background Stretcher) is a jQuery plug-in that can add multiple Background images to Your webpage. Multiple Background images can be automatically switched, and the Background image size can be adaptive to the browser window size. The switching effect of the background image is fade-in, fade-out, scroll, and magic light. When you select scroll and magic light, you can choose the direction, top, bottom, left, top, bottom, right, and bottom. You can also set forward, reverse, or random order for image switching. For more options, you will study them 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 adjust the image size proportionally to fill the entire window area. If you use multiple image modes (the slide speed and duration can be configured), this plug-in serves as a slide.

Plug-in features:

The script file is concise and easy to set. It supports all new browsers and supports single or multiple images.

Plug-in usage:

First, you must download the plug-in first. The plug-in package contains the required JS files.

Then, insert the following code into and between your webpage so that you can use the plug-in later. Pay attention to the path in the Code. The relative path or absolute path depends on your actual needs.

?

1 2 3 4

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

Next, insert the following code into the above Code to initialize the bgStretcher plug-in. You need to inform the plug-in of the element on which the plug-in works and configure the plug-in options. Similarly, do not make any mistakes in the image path in the code.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<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 '], ImageWidth: 800, ImageHeight: 400, SlideDirection: 'n ', SlideShowSpeed: 1000, TransitionEffect: 'fade ', SequenceMode: 'normal ', });   }); </Script>

This plug-in is not only used for the entire webpage background, but also for a webpage element. Of course, at least this element can set the background, such as DIV, etc. The webpage element is selected by ID or Class. The element name "BODY" should be the only element name in the webpage, that is, setting the background for the whole webpage. If you want to set a background for a 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 is amazing.

Plug-in options:

Configuration Options	Saved 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 shold start.
SlideShowSpeed	Normal	Numeric value in milliseconds or jQuery string value ('fast ', 'normal', 'low'). 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

Plugin method:

Method description

$ (ObjID). bgStretcher. play () Resume background slideshow

$ (ObjID). bgStretcher. pause () Pause background slideshow

$ (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 all the content of this article. I hope you will like it.