jQuery插件bgStretcher.js实现全屏背景特效

2024-05-06 16:21:30

字体：大中小

来源：转载

供稿：网友

可以自动动态更换网页背景图片的jQuery插件bgstretcher.js，sharejs.com推荐的这个插件，可以自定义多种方式让网页背景自动切换，效果流畅，非常难得，调用代码也非常简单。

bgStretcher 2011 (Background Stretcher)是一个jQuery的插件，可以为你的网页添加多张背景图，且多个背景图能够自动切换，同时背景图大小可以自适应浏览器窗口的大小。背景图的切换效果有淡入淡出，滚动，幻灯，其中选用滚动和幻灯时，可以选择方向，上下左右，或者左上右下，右上左下。图片切换顺序也可以设置正向，反向或者随机。更多选项就看你自己慢慢研究了。

bgStretcher是一个jQuery插件，它允许你添加一个大图像（或一组图像）到您的网页的背景，并会按比例调整图像大小，以填满整个窗口区域。如果使用多个图像模式（幻灯片的速度和持续时间可配置），该插件将作为幻灯片。

插件特点：

脚本文件简洁，设置简单；支持所有新版浏览器；支持单张或者多张图片。

插件使用：

首先，你当然要把插件先下载再说，插件包里已经包含了所需要的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>