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

2024-05-06 16:21:30

字體：大中小

來源：轉載

供稿：網友

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

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

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

插件特點：

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

插件使用：

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

然后，把下面的代碼插入到你網頁的<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>