jQuery插件Fullscreen Background

最新推荐文章于 2024-06-03 10:01:49 发布

weixin_30896511

最新推荐文章于 2024-06-03 10:01:49 发布

阅读量182

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/bango/archive/2012/10/17/2727530.html

版权

Fullscreen Background是一个jQuery全屏背景插件，支持IE7 and higher, Firefox, Opera, Safari and Chrome 。使用也相当简单。

1、在<head>中导入

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.fullscreenBackground.js">
</script>

2、在你的HTML中创建结构，一定要定义宽、高

<div class="content">
   这是我的内容
</div>
<div id="background-image">
    <img src="path/to/img.jpg" alt="" width="800" height="600" />
</div>

3、在$(document).ready();事件中使用

$("#background-image").fullscreenBackground();

插件还提供了一些可选参数

$("#background-image").fullscreenBackground({selector:"img",fillOnResize:true,defaultCss:true});

selector (default: “img”)
通过元素你调用该函数时，将使用的子元素。

fillOnResize（默认：true）
根据屏幕尺寸的变化来调整，设置为true。

defaultCss（默认：true）
是否使用默认CSS样式，如果你想自己定义CSS样式请使用false

开发者：http://www.gayadesign.com/diy/jquery-plugin-fullscreen-background/

DEMO:http://gayadesign.com/scripts/fullscreenbackground/

转载于:https://www.cnblogs.com/bango/archive/2012/10/17/2727530.html