momode 2013-04-26
在Web页面的制作中,总会有时候碰到制作全屏背景的案例,特别是一些页游的专题页面中,为了尽显游戏的风格,时常这样做,看起来很酷。前面在《完美的页面背景图片制作》一文中也介绍过使用CSS3的background-size来制作,那么CSS能制作的效果,为何还要使用jQuery插件来呢?是的,你的想法是对的,但CSS制作有一个不足的地方,没办法添加更多炫的效果,而使用 jQuery插件在制作全屏背景时还可以加上一些特殊的效果,比如说幻灯片效果、纹理效果、缩小效果等。今天收集了十二个这样的插件,方便大家省去GG搜索的时间。
1、Supersized!
Supersized!是一个创建全屏背景幻灯很有名的jQuery插件。
2、Vegas Background
Vegas Background是一个添加全屏背景或制作出令人惊异的幻灯片的 jQuery插件。这个插件将自动应用一个很酷的纹理,使背景图像看起来像“背景”。
3、bgStretcher
bgStretcher允许您给风页添加背景图像,并且能按比例调整它,来填充整个浏览器窗口。你也可以用它创建一个背景幻灯。
4、tubular
tubular是一个了不起的jQuery插件,可以让你设定一个YouTube视频作为你的网页背景。
5、Backstretch
Backstretch是一个简单的jQuery插件,允许你给网页动态添加一个背景图像,而且它将拉伸图像以适应浏览器窗口的大小。
6、videoBG
此jQuery插件能让您能轻松地给网页会任何一个div添加一个HTML5视频作为背景。它还提供一个图像作为后备,防止用户的浏览器不支持HTML5视频标签。
7、MaxImage
MaxImage 2.0是一个全画面背景幻灯jQuery插件,允许你使用jQuery插件,支持几乎所有的循环周期的jQuery函数、转换等。
8、Smooth Fullscreen Background Slideshow
Smooth Fullscreen Background Slideshow是众多制作幻灯片全屏背景插件中最优秀的一种,你可以使用这个插件制作幻灯片播放的全屏背景效果,并且可以通过几行代码给背景图添加网格效果,看起来更完美。
9、Fullscreen Background
这个背景插件运行良好,IE7+,Firefox、Opera、Safari、Chrome。同时,它很容易集成和每个人都能做到这一点!
10、Easy Background Resize
一个简单的全屏缩放背景的插件,如果你不需要其他的功能,这个插件是一个很好的插件。
11、Full Size Background Image
一个轻量级jQuery插件,可以帮你自动调整背景图片大小以适的屏幕的长宽比。
12、Nice jQuery Full Background Image Slider
这不是一个jQuery插件,但是一个简单的制作全屏背景幻灯的jQuery教程,你要是有兴趣可以看看。
上面12个制作全屏背景的插件资源来自于Kenny的《12 Fullscreen Background jQuery Plugins》。
上面插件的具体使用方法大家可以对应看其api文档,我只是觉得这些插件有意思,或许哪一天就用得上,收集起来方便要用的时候能一下找到,省去了搜索的时间,如果大家手上还有其他类似这样功能的插件,不仿与大家分享,可以将你知道的插件名和地址在评论中留言,我会添加上去。独乐乐不如众乐乐(^_^)。
下面附上本站有关于CSS方法解决全屏背景图片的方法:
CSS3 Background-size
如何用CSS实现大背景样式
完美的页面背景图片制作
纯CSS3制作满屏图像幻灯片
css3全屏背景
制作全屏背景技巧
出处:http://www.w3cplus.com/resources/fullscreen-background-jquery-plugins.html