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 option location 页面跳转实现代码
Dec 27 Javascript
网页开发中的容易忽略的问题 javascript HTML中的table
Apr 15 Javascript
使用Meteor配合Node.js编写实时聊天应用的范例
Jun 23 Javascript
js实现下拉列表选中某个值的方法(3种方法)
Dec 17 Javascript
基于Node.js实现nodemailer邮件发送
Jan 26 Javascript
JS中使用apply、bind实现为函数或者类传入动态个数的参数
Apr 26 Javascript
WEB开发之注册页面验证码倒计时代码的实现
Dec 15 Javascript
Angular客户端请求Rest服务跨域问题的解决方法
Sep 19 Javascript
react-native中ListView组件点击跳转的方法示例
Sep 30 Javascript
详解JS浏览器事件循环机制
Mar 27 Javascript
微信小程序音乐播放器开发
Nov 20 Javascript
在vue中实现禁止屏幕滚动,禁止屏幕滑动
Jul 22 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
Smarty模板快速入门
2007/01/04 PHP
PHP中几种常见的超时处理全面总结
2012/09/11 PHP
php中header设置常见文件类型的content-type
2015/06/23 PHP
PHP新特性之字节码缓存和内置服务器
2017/08/11 PHP
使用jQuery的attr方法来修改onclick值
2014/07/07 Javascript
wap图片滚动特效无css3元素纯js脚本编写
2014/08/22 Javascript
JavaScript中的console.log()函数详细介绍
2014/12/29 Javascript
JS实现点击按钮自动增加一个单元格的方法
2015/03/09 Javascript
四种参数传递的形式——URL,超链接,js,form表单
2015/07/24 Javascript
window.open不被拦截的简单实现代码(推荐)
2016/08/04 Javascript
JS库之Waypoints的用法详解
2017/09/13 Javascript
vue+Vue Router多级侧导航切换路由(页面)的实现代码
2018/12/20 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
15分钟学会vue项目改造成SSR(小白教程)
2019/12/17 Javascript
vue项目中使用vue-layer弹框插件的方法
2020/03/11 Javascript
JS Generator 函数的含义与用法实例总结
2020/04/08 Javascript
jQuery使用jsonp实现百度搜索的示例代码
2020/07/08 jQuery
[01:59]深扒TI7聊天轮盘语音出处 1
2017/05/11 DOTA
[01:33:07]VGJ.T vs Newbee Supermajor 败者组 BO3 第一场 6.6
2018/06/07 DOTA
[02:31]2018年度DOTA2最具人气选手-完美盛典
2018/12/16 DOTA
用Python写一段用户登录的程序代码
2018/04/22 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
Python3.5基础之NumPy模块的使用图文与实例详解
2019/04/24 Python
python3.6根据m3u8下载mp4视频
2019/06/17 Python
python脚本开机自启的实现方法
2019/06/28 Python
对python中的float除法和整除法的实例详解
2019/07/20 Python
python获取指定日期范围内的每一天,每个月,每季度的方法
2019/08/08 Python
Python 读取xml数据,cv2裁剪图片实例
2020/03/10 Python
解决运行出现'dict' object has no attribute 'has_key'问题
2020/07/15 Python
python一些性能分析的技巧
2020/08/30 Python
高山背包:High Sierra
2017/11/23 全球购物
PHP开发工程师面试问题集锦
2012/11/01 面试题
期中考试反思800字
2014/05/01 职场文书
2014年十一国庆节爱国演讲稿
2014/09/23 职场文书
2015年精神文明建设工作总结
2015/04/21 职场文书
MySQL数据迁移相关总结
2021/04/29 MySQL