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

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

 

分享到:
评论

相关推荐

    超爽的抽屉效果.zip

    android 源码学习. 资料部分来源于合法的互联网渠道收集和整理,供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权,请通知本人删除。感谢CSDN官方提供大家交流的平台

    关于学习C语言时写的代码.zip

    C语言诞生于美国的贝尔实验室,由丹尼斯·里奇(Dennis MacAlistair Ritchie)以肯尼斯·蓝·汤普森(Kenneth Lane Thompson)设计的B语言为基础发展而来,在它的主体设计完成后,汤普森和里奇用它完全重写了UNIX,且随着UNIX的发展,c语言也得到了不断的完善。为了利于C语言的全面推广,许多专家学者和硬件厂商联合组成了C语言标准委员会,并在之后的1989年,诞生了第一个完备的C标准,简称“C89”,也就是“ANSI C”,截至2020年,最新的C语言标准为2018年6月发布的“C18”。 [5] C语言之所以命名为C,是因为C语言源自Ken Thompson发明的B语言,而B语言则源自BCPL语言。 1967年,剑桥大学的Martin Richards对CPL语言进行了简化,于是产生了BCPL(Basic Combined Programming Language)语言。

    机械臂论文.doc

    机械臂论文.doc

    S7200 and WINCC flexible.doc

    S7200 and WINCC flexible.doc

    27.大学生体质测试管理系统的设计与实现-Springboot+ Mysql+Java+ B/S结构(可运行源码+数据库+设计文

    27.大学生体质测试管理系统的设计与实现|Springboot+ Mysql+Java+ B/S结构(可运行源码(含数据库脚本)+开发文档+lw(高分毕设项目) 详细设计文档介绍链接:http://t.csdnimg.cn/jtyYh 内容概要: 系统主要分为系统管理员、教师和用户三个部分,系统管理员主要功能包括首页、个人中心、用户管理、教师管理、体质测试管理、测试报告管理、测试成绩管理、留言板、系统管理;基本上实现了整个大学生体质测试管理系统信息管理的过程。 全套项目源码+详尽文档,一站式解决您的学习与项目需求。 适用人群: 计算机、通信、人工智能、自动化等专业的学生、老师及从业者。 使用场景及目标: 无论是毕设、期末大作业还是课程设计,一键下载,轻松部署,助您轻松完成项目。 项目代码经过调试测试,确保直接运行,节省您的时间和精力。 其他说明: 项目整体具有较高的学习借鉴价值,基础能力强的可以在此基础上修改调整,以实现不同的功能。

    c语言-c语言编程基础之leetcode题解第24题两两交换链表中的节点.zip

    c语言 c语言_c语言编程基础之leetcode题解第24题两两交换链表中的节点

    电子麦克风.zip

    android 源码学习. 资料部分来源于合法的互联网渠道收集和整理,供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权,请通知本人删除。感谢CSDN官方提供大家交流的平台

    文字转语音朗读器.txt

    文字转语音朗读器.txt

    C语言学习,语言学习.zip

    C语言诞生于美国的贝尔实验室,由丹尼斯·里奇(Dennis MacAlistair Ritchie)以肯尼斯·蓝·汤普森(Kenneth Lane Thompson)设计的B语言为基础发展而来,在它的主体设计完成后,汤普森和里奇用它完全重写了UNIX,且随着UNIX的发展,c语言也得到了不断的完善。为了利于C语言的全面推广,许多专家学者和硬件厂商联合组成了C语言标准委员会,并在之后的1989年,诞生了第一个完备的C标准,简称“C89”,也就是“ANSI C”,截至2020年,最新的C语言标准为2018年6月发布的“C18”。 [5] C语言之所以命名为C,是因为C语言源自Ken Thompson发明的B语言,而B语言则源自BCPL语言。 1967年,剑桥大学的Martin Richards对CPL语言进行了简化,于是产生了BCPL(Basic Combined Programming Language)语言。

    基于Web的平面设计课程在线学习平台设计与实现-平面设计课程在线学习平台java代码-平面设计课程在线学习平台java代码-代码

    平面设计课程在线学习-平面设计课程在线学习平台-平面设计课程在线学习平台源码-平面设计课程在线学习平台java代码-平面设计课程在线学习平台设计与实现-基于ssm的平面设计课程在线学习平台-基于Web的平面设计课程在线学习平台设计与实现-平面设计课程在线学习网站-平面设计课程在线学习网站源码-平面设计课程在线学习网站java代码-平面设计课程在线学习项目-平面设计课程在线学习项目代码-平面设计课程在线学习系统-平面设计课程在线学习系统源码-平面设计课程在线学习管理系统-平面设计课程在线学习管理系统java代码-平面设计课程在线学习代码 1、技术栈:java,ssm,spring,springmvc,vue,ajax,maven,mysql,MyBatisPlus等 开发语言:Java 框架:SSM JDK版本:JDK1.8 数据库:mysql 5.7 数据库工具:SQLyog/Navicat 开发软件:eclipse/myeclipse/idea Maven包:Maven 浏览器:谷歌浏览器 2、系统的实现 用户信息 图片素材 视频素材 摘 要 I 目 录 III 第1章 绪论

    ་基于C+++OpenCV技术实现的动态目标的追踪!源码+使用文档+全部资料(优秀项目).zip

    【资源说明】 ་基于C+++OpenCV技术实现的动态目标的追踪!源码+使用文档+全部资料(优秀项目).zip་基于C+++OpenCV技术实现的动态目标的追踪!源码+使用文档+全部资料(优秀项目).zip་基于C+++OpenCV技术实现的动态目标的追踪!源码+使用文档+全部资料(优秀项目).zip 【备注】 1、该项目是个人高分毕业设计项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    DSP实用教程PPT上.ppt

    DSP实用教程PPT上.ppt

    基于Android+OpenCV的司机疲劳检测项目源码+使用文档+全部资料(优秀项目).zip

    【资源说明】 基于Android+OpenCV的司机疲劳检测项目源码+使用文档+全部资料(优秀项目).zip基于Android+OpenCV的司机疲劳检测项目源码+使用文档+全部资料(优秀项目).zip基于Android+OpenCV的司机疲劳检测项目源码+使用文档+全部资料(优秀项目).zip 【备注】 1、该项目是个人高分毕业设计项目源码,已获导师指导认可通过,答辩评审分达到95分 2、该资源内项目代码都经过测试运行成功,功能ok的情况下才上传的,请放心下载使用! 3、本项目适合计算机相关专业(如软件工程、计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载使用,也可作为毕业设计、课程设计、作业、项目初期立项演示等,当然也适合小白学习进阶。 4、如果基础还行,可以在此代码基础上进行修改,以实现其他功能,也可直接用于毕设、课设、作业等。 欢迎下载,沟通交流,互相学习,共同进步!

    标记view.zip

    android 源码学习. 资料部分来源于合法的互联网渠道收集和整理,供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权,请通知本人删除。感谢CSDN官方提供大家交流的平台

    Python 入门教程快速学会 Python.docx

    python入门 假设我们有这么一项任务 : 简单测试局域网中的电脑是否连通 . 这些电脑的 ip 范围 从 192.168.0.101 到 192.168.0.200. 思路 : 用 shell 编程 .(Linux 通常是 bash 而 Windows 是批处理脚本 ). 例如 , 在 Windows 上用 ping ip 的命令依次测试各个机器并得到控制台输出 . 由于 ping 通的时候控制台文 本通常是 "Reply from ... " 而不通的时候文本是 "time out ... " , 所以 , 在结果中进行 字符串查找 , 即可知道该机器是否连通 .实现 :Java 代码如下

    临写字帖.zip

    临写字帖.zip

    英飞凌PowerCode软件安装教程

    英飞凌PowerCode软件安装教程,包括下载链接和安装步骤

    仿美图秀秀拼图功能使用代码的时候,请修改2014-03big文件放到mntsdcardclothe目录下。.zip

    android 源码学习. 资料部分来源于合法的互联网渠道收集和整理,供大家学习参考与交流。本人不对所涉及的版权问题或内容负法律责任。如有侵权,请通知本人删除。感谢CSDN官方提供大家交流的平台

    本科获奖毕业论文-基于DSP的语音信号的处理.doc

    本科获奖毕业论文-基于DSP的语音信号的处理.doc

    RTKLIB上机实习资料

    有关RTKLIB资源 实习使用 参考Blog地址:https://blog.csdn.net/CUGLin/article/details/137975165?spm=1001.2014.3001.5501

Global site tag (gtag.js) - Google Analytics