`
梵谷的皇心
  • 浏览: 22255 次
社区版块
存档分类
最新评论

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

阅读更多

在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

 

分享到:
评论

相关推荐

    JQUERY制作的全屏背景投影效果的图片相

    "JQUERY制作的全屏背景投影效果的图片相"这个项目,显然是利用jQuery库来实现一种独特的全屏背景效果,可能是带有动态过渡或者视觉特效的背景图像展示。下面将详细介绍如何使用jQuery实现这样的功能。 首先,jQuery...

    第一个使用jQueryCycle插件作为全屏背景幻灯片的jQuery插件_JavaScript_CSS_下载.zip

    标题中的“第一个使用jQueryCycle插件作为全屏背景幻灯片的jQuery插件”涉及到的是一个使用jQuery和jQueryCycle插件来实现全屏背景轮播效果的JavaScript解决方案。这个插件能够帮助开发者创建吸引人的、视觉冲击力强...

    jQuery全屏滚动插件

    总的来说,XSwitch是一款强大的jQuery全屏滚动插件,结合其高度的可定制性和优秀的用户体验,对于希望打造现代、引人入胜的全屏滚动网站的开发者来说,无疑是一个理想的选择。通过深入理解XSwitch的工作原理和使用...

    jQueryGallerybox是一款可以制作全屏响应式效果的jQuery图片画廊插件

    jQuery Gallerybox是一款强大的jQuery插件,专为创建全屏响应式的图片画廊而设计。这款插件具有现代网页设计所需的诸多特性,能够提供卓越的用户体验,尤其适合在各种设备上展示高质量的图像内容。以下是对jQuery ...

    jquery的全屏轮播插件jquery-fsscroll

    jQuery-fsscroll是针对jQuery设计的一个全屏轮播插件,旨在为网页添加高质量的全屏轮播效果。 **全屏轮播插件jQuery-fsscroll:** 这个插件专为那些希望在网页上实现引人注目的全屏滚动效果的开发者而设计。它可以...

    6个非常精美的jQuery背景动画个性全屏焦点图(五)

    【标题】"6个非常精美的jQuery背景动画个性全屏焦点图(五)"涉及到的是在Web开发领域中,利用jQuery这一JavaScript库来创建动态、吸引人的全屏背景动画和焦点图的效果。jQuery是一个广泛使用的JavaScript库,它简化...

    简单实用的jQuery全屏背景视觉差特效

    这是一款基于jquery.parallax.js的简单实用的jQuery全屏背景...jquery.parallax.js是一个用于制作视觉差特效的jQuery插件,它可以将各个div设置为不同的层,并为各个层设置不同的速度,在鼠标移动时产生视觉差效果。

    网站背景拉伸平铺jQuery插件.zip

    网站背景拉伸平铺jQuery插件是Web开发中一种实用的工具,主要目的是为了实现网页背景图片能够根据浏览器窗口尺寸动态地自适应调整,从而达到全屏或平铺的效果。在设计网页时,一个美观的背景可以提升用户体验,而这...

    jQuery全屏滚动插件fullPage.js

    fullPage.js 是一个基于 jQuery 的插件,它能够很方便、很轻松的制作出全屏网站,主要功能有: 支持鼠标滚动 支持前进后退和键盘控制 多个回调函数 支持手机、平板触摸事件 支持 CSS3 动画 支持窗口缩放 窗口缩放时...

    jwtextureswim-可制作背景图片动画的jQuery插件

    **jQuery库:jwtextureswim -...总的来说,`jwtextureswim`是一个强大且易于使用的jQuery插件,能够帮助开发者快速创建背景图片动画,为网页增添动态元素。结合合理的配置和创意,它能够在网页设计中发挥出极大的潜力。

    Jquery 插件大集合

    在“jquery 插件收藏”这个压缩包中,很可能包含了各种各样的jQuery插件,包括但不限于画廊插件。画廊插件是用于展示图片或多媒体内容的工具,常见的有Lightbox、Fancybox、Nivo Slider等。这些插件通常具备以下特性...

    jquery制作四屏随着网页过渡全屏布局插件

    【jQuery制作四屏随网页过渡全屏布局插件】是一个用于构建现代网页设计的工具,尤其适用于展示型网站或多媒体项目。此插件利用jQuery库的事件监听和DOM操作功能,实现了页面之间的平滑过渡效果,并确保内容在不同...

    jQuery全屏背景图片极致缩放切换显示特效代码下载.rar

    【jQuery全屏背景图片极致缩放切换显示特效代码解析】 在网页设计中,全屏背景图片可以极大地提升网站的视觉效果,为用户提供沉浸式的浏览体验。jQuery库因其易用性和丰富的插件支持,成为了实现此类特效的首选工具...

    全屏响应式的jQuery日历插件

    此外,利用jQuery插件的API,你可以添加自定义事件和功能,比如添加事件回调、改变日历的显示格式等。 总的来说,全屏响应式的jQuery日历插件结合了jQuery的便捷性和CSS3的灵活性,为Web开发者提供了一个强大且美观...

    全屏插件 fullpage jquery源码 + 代码案例

    - **jQuery插件**:jQuery是一个广泛使用的JavaScript库,简化了DOM操作、事件处理和动画等功能。Fullpage.js是基于jQuery的,可以方便地与现有的jQuery项目集成。 2. **Fullpage.js的功能**: - **自动布局**:...

    带滚动缩略图的全屏jQuery相册代码.zip

    这种相册设计通常包括全屏背景图像、可滚动的缩略图以及各种过渡效果,旨在增强网站的视觉吸引力并提升用户体验。 在"带滚动缩略图的全屏jQuery相册代码"项目中,我们可以推测它包含了一个实现这种功能的代码示例。...

    这是一款实用jQuery和css3制作的炫酷弹性背景轮播图插件

    这款"实用jQuery和css3制作的炫酷弹性背景轮播图插件"就是这样的一个工具,旨在为网站添加引人入胜的动态元素,提升用户交互体验。下面我们将深入探讨这个插件背后的技术原理和实现方式。 首先,jQuery是一个广泛...

    jQuery全屏背景视频播放特效.zip

    这时可以借助jQuery插件如`video.js`或`bigVideo.js`来实现更好的兼容性。 通过以上步骤,我们可以实现一个基本的jQuery全屏背景视频播放特效。然而,实际应用中可能还需要考虑更多细节,如视频预加载、自适应不同...

    jQuery超酷滚动背景图片视觉差特效插件

    Parallax ImageScroll是一款效果非常炫酷的滚动背景图片视觉差特效jQuery插件。该背景图片视觉差插件使用css3 transform来制作动画效果,并在不支持CSS3属性的浏览器上提供回退方案。

    jQuery立体全屏相册

    在网页设计中,jQuery立体全屏相册是一种高级的交互式图像展示技术,它通过结合JavaScript库jQuery的强大功能,为用户带来独特的视觉体验。这种相册通常具备全屏展示、立体翻页效果以及动态过渡动画,使网页上的图片...

Global site tag (gtag.js) - Google Analytics