jQuery插件bgstretcher.js实现全屏背景的影响

bgstretcher 2011(背景Stretcher)是一个jQuery插件。它可以为你的网页添加多个背景地图,多个背景地图可以自动切换。同时,背景地图的大小可以与浏览器窗口大小相适应,背景地图的切换效果逐渐消失、淡出、滚动和滑动。当选择滚动和幻灯片时,它可以选择方向,向上或向下,向左或向右,底部,左右,图像切换的顺序也可以设置为正、反转或随机。更多的选项是你自己的研究。

BgStretcher是一个jQuery插件。它允许你在网页的背景中添加一个大的图像(或一组图像),并调整图像大小来填充整个窗口区域。如果使用多个图像模式(幻灯片的速度和持续时间可以配置),插件将用作幻灯片。

插件特性:

该脚本简单而简单;支持所有新的浏览器;支持单个或多个图片。

插件使用:

首先,你必须先下载这个插件,而这个插件包包含所需的js文件。



然后将以下代码插入Web页面之间的页面中,以便以后可以使用插件来注意代码中的路径,比如相对路径或绝对路径来查看实际需要。









然后将下面的代码插入上面的代码初始化bgstretcher插件,告诉插件将发挥作用和配置插件选项元素。同时,注意代码中的图片的路径和不犯错误。



$(文档)Ready(函数(){)

backund担架 / /初始化
$('。大茂)。BgStretcher({
图片:{ '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:正常,
});

});




此插件不仅用于整个Web的后台,而且还用于Web页面元素。Of course, this element can set up background, such as DIV and so on.The selection of web elements is made by ID or Class, and the name of BODY is the only element name in the web page, that is, setting the background for the entire web page.If you set a background for a DIV block of a page, you need to define a ID for the DIV, or know its style, Class name is also OK, ID and Class names are the best ones, otherwise the effect will be amazing.

插入选项:





配置选项
默认值
选项说明


imagecontainer
bgstretcher
BgStretcher将自动生成结构中,图像列表,这也是首次使用。


resizeproportionally
真正的
表明如果背景图像(S)将缩放比例或不。


resizeanimate

表明如果背景图像(S)将缩放动画。(小心)


图像

包含在页面背景上显示的图像列表的数组。


imagewidth
一千零二十四
原始图像宽度。


ImageHeight
七百六十八
原始图像高度。


maxwidth
汽车
最大图像宽度。


最大高度
汽车
最大像高。


nextslidedelay
3000(3秒)
数值以毫秒为单位。参数设置延迟到下一个幻灯片应该


slideshowspeed
正常
在毫秒或jQuery字符串值,数字值('fast ','正常','慢')。


幻灯片
真正的
允许或不允许幻灯片演示功能。


transitioneffect
褪色
过渡效果(使用:没有,simpleslide,superslide)。


slidedirection
n
滑动方向:n u2013北方的South,W u2013 E u2013东西。


sequencemode
正常
序列模式(使用也:返回,随机)


buttonprev

前按钮CSS选择器


buttonnext

下一个按钮CSS选择器


分页

分页CSS选择器


锚定
左上
锚定bgstrtcher地区关于窗口


anchoringimg
左上
关于窗口的锚定图像


preloadimg

预加载图像使用真实


stratelementindex

开始元素指标


callbackfunction
无效的
回调函数的名称





插件方法:

方法名称方法描述

$(objId)。BgStretcher.play()简历背景幻灯片

$(objId)。BgStretcher.pause()暂停背景幻灯片

$(objId)。BgStretcher.sliderDestroy()破坏背景幻灯片

浏览器的兼容性:



MS Internet Explorer,6, 7, 8,9

火狐浏览器2, 3, 4

Opera 9 +

苹果浏览器

眉目传情铬

以上是本文的全部内容,希望大家能喜欢。