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


Posted in Javascript onJune 05, 2015

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>

接着把下面的代码,插入到上面代码之后,来初始化 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 ‘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

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
动态加载js的几种方法
Oct 23 Javascript
JavaScript 类似flash效果的立体图片浏览器
Feb 08 Javascript
javascript不同类型数据之间的运算的转换方法
Feb 13 Javascript
JS验证图片格式和大小并预览的简单实例
Oct 11 Javascript
浅谈javascript中的事件冒泡和事件捕获
Dec 28 Javascript
Javascript Function.prototype.bind详细分析
Dec 29 Javascript
angularjs指令之绑定策略(@、=、&amp;)
Apr 13 Javascript
vue-cli+webpack在生成的项目中使用bootstrap实例代码
May 26 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
vuejs 制作背景淡入淡出切换动画的实例
Sep 01 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
vue实现Input输入框模糊查询方法
Jan 29 Javascript
js+html5绘制图片到canvas的方法
Jun 05 #Javascript
简介JavaScript中valueOf()方法的使用
Jun 05 #Javascript
jQuery插件jRumble实现网页元素抖动
Jun 05 #Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
Jun 05 #Javascript
jquery插件NProgress.js制作网页加载进度条
Jun 05 #Javascript
JavaScript中toString()方法的使用详解
Jun 05 #Javascript
javascript实现倒计时并弹窗提示特效
Jun 05 #Javascript
You might like
我的论坛源代码(十)
2006/10/09 PHP
PHP MYSQL乱码问题,使用SET NAMES utf8校正
2009/11/30 PHP
php写的带缓存数据功能的mysqli类
2012/09/06 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
[原创]php实现数组按拼音顺序排序的方法
2017/05/03 PHP
Swoole 5将移除自动添加Event::wait()特性详解
2019/07/10 PHP
PHP执行linux命令6个函数代码实例
2020/11/24 PHP
取得传值的函数
2006/10/27 Javascript
MooTools 1.2介绍
2009/09/14 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
jQuery简单图表peity.js使用示例
2014/05/02 Javascript
原生js编写设为首页兼容ie、火狐和谷歌
2014/06/05 Javascript
jQuery中:disabled选择器用法实例
2015/01/04 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
JS表的模拟方法
2015/02/05 Javascript
jQuery动态创建元素以及追加节点的实现方法
2016/10/20 Javascript
JS 拦截全局ajax请求实例解析
2016/11/29 Javascript
使用bootstrap插件实现模态框效果
2017/05/10 Javascript
浅谈JavaScript中的属性:如何遍历属性
2017/09/14 Javascript
layui获取选中行数据的实例讲解
2018/08/19 Javascript
python翻译软件实现代码(使用google api完成)
2013/11/26 Python
python发布模块的步骤分享
2014/02/21 Python
Python实现周期性抓取网页内容的方法
2015/11/04 Python
利用Python如何生成hash值示例详解
2017/12/20 Python
Python File(文件) 方法整理
2019/02/18 Python
python文件写入write()的操作
2019/05/14 Python
Pytorch中膨胀卷积的用法详解
2020/01/07 Python
Python Http请求json解析库用法解析
2020/11/28 Python
CSS3图片旋转特效(360/60/-360度)
2013/10/10 HTML / CSS
园林技术个人的自我评价
2014/02/15 职场文书
工程造价专业求职信
2014/07/17 职场文书
授权委托书
2014/07/31 职场文书
Pytorch 统计模型参数量的操作 param.numel()
2021/05/13 Python
Matplotlib绘制混淆矩阵的实现
2021/05/27 Python
详解Redis集群搭建的三种方式
2021/05/31 Redis
 分享一个Python 遇到数据库超好用的模块
2022/04/06 Python