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 相关文章推荐
JavaScript delete操作符应用实例
Jan 13 Javascript
浅析js设置控件的readonly与enabled属性问题
Dec 25 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
jQuery结合CSS制作漂亮的select下拉菜单
May 03 Javascript
JavaScript实现对下拉列表值进行排序的方法
Jul 15 Javascript
Javascript BOM学习小结(六)
Nov 26 Javascript
剖析Node.js异步编程中的回调与代码设计模式
Feb 16 Javascript
基于javascript实现句子翻牌网页版小游戏
Mar 23 Javascript
javascript实现用户点击数量统计
Dec 25 Javascript
js实现随机抽选效果、随机抽选红色球效果
Jan 13 Javascript
微信小程序实现购物车代码实例详解
Aug 29 Javascript
js实现GIF图片的分解和合成
Oct 24 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
ThinkPHP之N方法实例详解
2014/06/20 PHP
php自动识别文字编码并转换为目标编码的方法
2015/08/08 PHP
浅析PHP7新功能及语法变化总结
2016/06/17 PHP
IE8的JavaScript点击事件(onclick)不兼容的解决方法
2013/11/22 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
2015/02/05 Javascript
在Javascript中处理数组之toSource()方法的使用
2015/06/09 Javascript
JS选中checkbox后获取table内一行TD所有数据的方法
2015/07/01 Javascript
bootstrap侧边栏圆点导航
2017/01/11 Javascript
JS中input表单隐藏域及其使用方法
2017/02/13 Javascript
nodejs中模块定义实例详解
2017/03/18 NodeJs
vue.js语法及常用指令
2017/10/29 Javascript
AngularJS模态框模板ngDialog的使用详解
2018/05/11 Javascript
讲解vue-router之什么是嵌套路由
2018/05/28 Javascript
JavaScript变速动画函数封装添加任意多个属性
2019/04/03 Javascript
Vue+Element实现动态生成新表单并添加验证功能
2019/05/23 Javascript
jquery实现自定义树形表格的方法【自定义树形结构table】
2019/07/12 jQuery
javascript删除数组元素的七个方法示例
2019/09/09 Javascript
mpvue 页面预加载新增preLoad生命周期的两种方式
2019/10/17 Javascript
Vue中用JSON实现刷新界面不影响倒计时
2020/10/26 Javascript
在Python中操作字典之setdefault()方法的使用
2015/05/21 Python
python实现的AES双向对称加密解密与用法分析
2017/05/02 Python
对pandas读取中文unicode的csv和添加行标题的方法详解
2018/12/12 Python
Django实现WebSSH操作物理机或虚拟机的方法
2019/11/06 Python
python字符串的拼接方法总结
2019/11/18 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
浅谈css3新单位vw、vh、vmin、vmax的使用详解
2017/12/01 HTML / CSS
Net-A-Porter美国官网:全球时尚奢侈品名站
2017/02/11 全球购物
VICHY薇姿美国官方网站:欧洲药房第一的抗衰老品牌
2017/11/22 全球购物
全球精选男装和家居用品:Article
2020/04/13 全球购物
试述DBMS的主要功能
2016/11/13 面试题
会计专业毕业生自我评价
2013/09/25 职场文书
交通事故委托书范本(2篇)
2014/09/21 职场文书
培训学校2015年度工作总结
2015/07/20 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
使用ORM新增数据在Mysql中的操作步骤
2021/07/26 MySQL