jQuery外掛bgStretcher.js實現全螢幕背景特效_jquery

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

bgStretcher是一個jQuery插件，它允許你添加一個大圖像（或一組圖像）到您的網頁的背景，並會按比例調整圖像大小，以填滿整個視窗區域。如果使用多個影像模式（投影片的速度和持續時間可設定），則該外掛程式將作為投影片。

插件特色：

腳本檔案簡潔，設定簡單；支援所有新版瀏覽器；支援單張或多張圖片。

外掛程式使用：

首先，你當然要把插件先下載再說，插件包裡已經包含了所需要的JS檔。

然後，把下面的程式碼插入到你網頁的

和之間，這樣後面才能使用插件，注意程式碼中的路徑，至於是相對路徑還是絕對路徑看你實際需要。

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

該插件不只是用於整個網頁背景哦，還可以用於某個網頁元素，當然，起碼這個元素能設置背景，比如DIV之類等等。選擇網頁元素是透過ID或Class來的，應為BODY這個元素名是網頁裡唯一的元素名，也就是為整個網頁設定背景。如果是給頁面某一個DIV塊設定背景，那你需要為這個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	‘左上’	關於視窗的錨定影像
preloadImg	假	對於預先載入映像，請使用 true
stratElementIndex	0	起始元素索引
回呼函數	空	回呼函數名稱

プラグインメソッド:

メソッド名 メソッドの説明
$(objID).bgStretcher.play() $(objID).bgStretcher.pause() _ $(objID).bgStretcher.sliderDestroy() 背景のスライドショーを破棄します

ブラウザの互換性:

MS Internet Explorer 6、7、8、9

Mozilla Firefox 2、3、4

オペラ9
アップルサファリ
Google Chrome

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。