M.J

M.J

转载W3CPlus 12个制作全屏背景的jQuery插件

本文转载自:W3CPlus     http://www.w3cplus.com/resources/fullscreen-background-jquery-plugins.html

在Web页面的制作中,总会有时候碰到制作全屏背景的案例,特别是一些页游的专题页面中,为了尽显游戏的风格,时常这样做,看起来很酷。前面在《完美的页面背景图片制作》一文中也介绍过使用CSS3的background-size来 制作,那么CSS能制作的效果,为何还要使用jQuery插件来呢?是的,你的想法是对的,但CSS制作有一个不足的地方,没办法添加更多炫的效果,而使 用 jQuery插件在制作全屏背景时还可以加上一些特殊的效果,比如说幻灯片效果、纹理效果、缩小效果等。今天收集了十二个这样的插件,方便大家省去GG搜 索的时间。

1、Supersized!

Supersized!

Supersized!是一个创建全屏背景幻灯很有名的jQuery插件。

2、Vegas Background

Vegas Background

Vegas Background是一个添加全屏背景或制作出令人惊异的幻灯片的 jQuery插件。这个插件将自动应用一个很酷的纹理,使背景图像看起来像“背景”。(需要翻墙才能打开)

3、bgStretcher

bgStretcher

bgStretcher允许您给风页添加背景图像,并且能按比例调整它,来填充整个浏览器窗口。你也可以用它创建一个背景幻灯。

4、tubular

tubular

tubular是一个了不起的jQuery插件,可以让你设定一个YouTube视频作为你的网页背景。

5、Backstretch

Backstretch

Backstretch是一个简单的jQuery插件,允许你给网页动态添加一个背景图像,而且它将拉伸图像以适应浏览器窗口的大小。

6、videoBG

videoBG

此jQuery插件能让您能轻松地给网页会任何一个div添加一个HTML5视频作为背景。它还提供一个图像作为后备,防止用户的浏览器不支持HTML5视频标签。

7、MaxImage

MaxImage

MaxImage 2.0是一个全画面背景幻灯jQuery插件,允许你使用jQuery插件,支持几乎所有的循环周期的jQuery函数、转换等。

8、Smooth Fullscreen Background Slideshow

Smooth Fullscreen Background Slideshow

Smooth Fullscreen Background Slideshow是众多制作幻灯片全屏背景插件中最优秀的一种,你可以使用这个插件制作幻灯片播放的全屏背景效果,并且可以通过几行代码给背景图添加网格效果,看起来更完美。

9、Fullscreen Background

Fullscreen Background

这个背景插件运行良好,IE7+,Firefox、Opera、Safari、Chrome。同时,它很容易集成和每个人都能做到这一点!

10、Easy Background Resize

Easy Background Resize

一个简单的全屏缩放背景的插件,如果你不需要其他的功能,这个插件是一个很好的插件。

11、Full Size Background Image

Full Size Background Image

一个轻量级jQuery插件,可以帮你自动调整背景图片大小以适的屏幕的长宽比。

12、Nice jQuery Full Background Image Slider

Nice jQuery Full Background Image Slider

这不是一个jQuery插件,但是一个简单的制作全屏背景幻灯的jQuery教程,你要是有兴趣可以看看。

上面12个制作全屏背景的插件资源来自于Kenny的《12 Fullscreen Background jQuery Plugins》。

上面插件的具体使用方法大家可以对应看其api文档,我只是觉得这些插件有意思,或许哪一天就用得上,收集起来方便要用的时候能一下找到,省去了搜 索的时间,如果大家手上还有其他类似这样功能的插件,不仿与大家分享,可以将你知道的插件名和地址在评论中留言,我会添加上去。独乐乐不如众乐乐 (^_^)。

下面附上本站有关于CSS方法解决全屏背景图片的方法:

  1. CSS3 Background-size
  2. 如何用CSS实现大背景样式
  3. 完美的页面背景图片制作
  4. 纯CSS3制作满屏图像幻灯片
  5. css3全屏背景
  6. 制作全屏背景技巧
2012 年 8 月 9 日 1 / /
标签:  暂无标签

评论回复

  1. 回复 轻微生活

    第一款我知道,博主在制作wordpress后台登陆页的时候用到了!
    我也把他迁移到了其他页面,不过一直在调整,还没上线过

5 + 2 =

回到顶部