在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
相关推荐
fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时...
Wavescroll是一款基于GSAP的响应式全屏背景图片jQuery幻灯片插件。该幻灯片插件支持鼠标拖动、鼠标滚动和移动触摸事件,可以制作出炫酷的波浪滚动切换效果。
jQuery Gallerybox是一款可以制作全屏响应式效果的jQuery图片画廊插件。该图片画廊带缩略图导航,支持半透明背景色,使用淡入淡出的动画过渡效果。它使用简单,而且效果非常不错。
这是一款基于jquery.parallax.js的简单实用的jQuery全屏背景...jquery.parallax.js是一个用于制作视觉差特效的jQuery插件,它可以将各个div设置为不同的层,并为各个层设置不同的速度,在鼠标移动时产生视觉差效果。
Parallax ImageScroll是一款效果非常炫酷的滚动背景图片视觉差特效jQuery插件。该背景图片视觉差插件使用css3 transform来制作动画效果,并在不支持CSS3属性的浏览器上提供回退方案。
这是一款实用jQuery和css3制作的炫酷弹性背景轮播图插件。该jQuery轮播图在轮播的时候,图片背景像弹簧一样来回弹动,效果非常震撼
jQuery Gallerybox是一款可以制作全屏响应式效果的jQuery图片画廊插件。该图片画廊带缩略图导航,支持半透明背景色,使用淡入淡出的动画过渡效果。它使用简单,而且效果非常不错。
这是一款使用jQuery制作的全屏动态缩略图导航幻灯片插件。在该幻灯片插件的左侧有几个导航按钮,点击按钮后会弹出一个盒型导航框,其中有缩略图导航,点击缩略图后页面背景会切换为该缩略图的大图。
73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款jquery缩略图商品切换放大展示功能插件 76. 一款使用jQuery左右控制横向图片滚动的代码 77. 一款...
fullPage.js是一个基于jQuery的全屏滚动插件,它能够很方便、很轻松的制作出全屏网站 主要功能 • 支持鼠标滚动 • 支持前进后退和键盘控制 • 多个回调函数 • 支持手机、平板触摸事件 • 支持 CSS3 动画 • 支持...
73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款jquery缩略图商品切换放大展示功能插件 76. 一款使用jQuery左右控制横向图片滚动的代码 77. 一款基于...
73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款jquery缩略图商品切换放大展示功能插件 76. 一款使用jQuery左右控制横向图片滚动的代码 77. 一款基于...
73. 一款jQuery插件slide幻灯片切换图片宽高自适应 74. 一款jQuery漂亮淡出淡入焦点大图切换源码 75. 一款jquery缩略图商品切换放大展示功能插件 76. 一款使用jQuery左右控制横向图片滚动的代码 77. 一款基于...
一款jQuery插件slide幻灯片切换图片宽高自适应 74.一款jQuery漂亮淡出淡入焦点大图切换源码 75.一款jquery缩略图商品切换放大展示功能插件 76.一款使用jQuery左右控制横向图片滚动的代码 77.一款基于jquery...
这是一款效果非常炫酷的jQuery 3D网页背景视觉差特效插件...该视觉差特效可以制作为全屏背景视觉差效果,也可以在一个容器中制作背景视觉差效果。当用户移动鼠标时,由于背景图片的移动速度不同,形成了3D视觉差效果。
fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时...
4个jQuery手机移动端幻灯片swipeslider插件]4个很漂亮的鼠标滑过超链接jQuery动画特效T4个简单实用的jQuery超链接动画特效 4款echarts.js扁平图形统计图表代码4款超酷Tabs选项卡代码 ]4种动态波浪文字动画js特效 ]4...
fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站。支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时自动调整 可...
fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时...
Java绘制图片火焰效果,源代码相关注释:前景和背景Image对象、Applet和绘制火焰的效果的Image对象、Applet和绘制火焰的效果的Graphics对象、火焰效果的线程、Applet的高度,图片到图片装载器、绘制火焰效果的X坐标...