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 相关文章推荐
为jquery.ui.dialog 增加“自动记住关闭时的位置”的功能
Nov 24 Javascript
JavaScript 原型继承
Dec 26 Javascript
点击按钮或链接不跳转只刷新页面的脚本整理
Oct 22 Javascript
javascript实现下班倒计时效果的方法(可桌面通知)
Jul 10 Javascript
JS实现六边形3D拖拽翻转效果的方法
Sep 11 Javascript
一步一步封装自己的HtmlHelper组件BootstrapHelper(三)
Sep 14 Javascript
jQuery Dialog 打开时自动聚焦的解决方法(两种方法)
Nov 24 Javascript
JS中事件冒泡和事件捕获介绍
Dec 13 Javascript
Vue实现双向数据绑定
May 03 Javascript
js传递数组参数到后台controller的方法
Mar 29 Javascript
vue2.0 实现导航守卫(路由守卫)
May 21 Javascript
vue-cli3项目打包后自动化部署到服务器的方法
Sep 16 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
php class类的用法详细总结
2013/10/17 PHP
Javascript模块化编程(三)require.js的用法及功能介绍
2013/01/17 Javascript
纯JS实现动态时间显示代码
2014/02/08 Javascript
js下将阿拉伯数字每三位一逗号分隔(如:15000000转化为15,000,000)
2014/06/02 Javascript
JQuery判断radio是否选中并获取选中值的示例代码
2014/10/17 Javascript
bootstrap改变按钮加载状态
2014/12/01 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
javascript实现数组内值索引随机化及创建随机数组的方法
2015/08/10 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
Vue多种方法实现表头和首列固定的示例代码
2018/02/02 Javascript
详解Javascript中new()到底做了些什么?
2018/03/29 Javascript
微信小程序实现聊天对话(文本、图片)功能
2018/07/06 Javascript
Vue2.0生命周期的理解
2018/08/20 Javascript
Element Input输入框的使用方法
2020/07/26 Javascript
vue同个按钮控制展开和折叠同个事件操作
2020/07/29 Javascript
解决vue项目运行提示Warnings while compiling.警告的问题
2020/09/18 Javascript
在Python中使用第三方模块的教程
2015/04/27 Python
python中 chr unichr ord函数的实例详解
2017/08/06 Python
python dataframe astype 字段类型转换方法
2018/04/11 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
python实现京东订单推送到测试环境,提供便利操作示例
2019/08/09 Python
使用selenium和pyquery爬取京东商品列表过程解析
2019/08/15 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
阿姆斯特丹杜莎夫人蜡像馆官方网站:Madame Tussauds Amsterdam
2019/03/12 全球购物
HomeAway英国:全球领先的度假租赁在线市场
2020/02/03 全球购物
Tommy Hilfiger澳洲官网:美国高端休闲领导品牌
2020/12/16 全球购物
法学专业本科生自荐信范文
2013/12/17 职场文书
铁路安全事故反思
2014/04/26 职场文书
爱国主义教育活动总结
2014/05/07 职场文书
文艺演出策划方案
2014/06/07 职场文书
小学生一分钟演讲稿
2014/08/26 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
Windows Server 2019 域控制器安装图文教程
2022/04/28 Servers