jQuery插件bgStretcher.js實現全屏背景特效

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

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

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

　　插件特點：

　　腳本文件簡潔，設置簡單;支持所有新版浏覽器;支持單張或者多張圖片。

　　插件使用：

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

　　然後，把下面的代碼插入到你網頁的和之間，這樣後面才能使用插件，注意代碼中的路徑，至於是相對路徑還是絕對路徑看你實際需要。

　　?

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>

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

　　?

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', '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 ‘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

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