快捷導(dǎo)航

jQuery插件bgStretcher.js實現(xiàn)全屏背景特效

更新時間：2015年06月05日 12:00:54 投稿：hebedich

可以自動動態(tài)更換網(wǎng)頁背景圖片的jQuery插件bgstretcher.js，sharejs.com推薦的這個插件，可以自定義多種方式讓網(wǎng)頁背景自動切換，效果流暢，非常難得，調(diào)用代碼也非常簡單。

bgStretcher 2011 (Background Stretcher)是一個jQuery的插件，可以為你的網(wǎng)頁添加多張背景圖，且多個背景圖能夠自動切換，同時背景圖大小可以自適應(yīng)瀏覽器窗口的大小。背景圖的切換效果有淡入淡出，滾動，幻燈，其中選用滾動和幻燈時，可以選擇方向，上下左右，或者左上右下，右上左下。圖片切換順序也可以設(shè)置正向，反向或者隨機(jī)。更多選項就看你自己慢慢研究了。

bgStretcher是一個jQuery插件，它允許你添加一個大圖像（或一組圖像）到您的網(wǎng)頁的背景，并會按比例調(diào)整圖像大小，以填滿整個窗口區(qū)域。如果使用多個圖像模式（幻燈片的速度和持續(xù)時間可配置），該插件將作為幻燈片。

插件特點：

腳本文件簡潔，設(shè)置簡單；支持所有新版瀏覽器；支持單張或者多張圖片。

插件使用：

首先，你當(dāng)然要把插件先下載再說，插件包里已經(jīng)包含了所需要的JS文件。

然后，把下面的代碼插入到你網(wǎng)頁的<head>和</head>之間，這樣后面才能使用插件，注意代碼中的路徑，至于是相對路徑還是絕對路徑看你實際需要。

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

接著把下面的代碼，插入到上面代碼之后，來初始化 bgStretcher 插件，要告知插件在哪個元素上起作用，同時可以配置插件的選項。同樣，注意代碼中的圖片路徑不要出錯。

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

該插件不只是用于整個網(wǎng)頁背景哦，還可以用于某個網(wǎng)頁元素，當(dāng)然，起碼這個元素能設(shè)置背景，比如DIV之類等等。選擇網(wǎng)頁元素是通過ID或者Class來的，應(yīng)為BODY這個元素名是網(wǎng)頁里唯一的元素名，也就是給整個網(wǎng)頁設(shè)置背景。如果是給頁面某一個DIV塊設(shè)置背景，那你需要給這個DIV定義一個ID或者知道它的樣式Class名也行，ID和Class名最好是唯一的，要不然效果很驚人。

插件選項：

配置選項	缺省值	選項說明
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

插件方法：

方法名稱方法說明
$(objID).bgStretcher.play()                Resume background slideshow
$(objID).bgStretcher.pause()              Pause background slideshow
$(objID).bgStretcher.sliderDestroy()   Destroy background slideshow

瀏覽器兼容性：

MS Internet Explorer 6, 7, 8, 9
Mozilla Firefox 2, 3, 4
Opera 9+
Apple Safari
Google Chrome

以上所述就是本文的全部內(nèi)容了，希望大家能夠喜歡。

您可能感興趣的文章: