jQuery插件Fullscreen Background

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/

posted @ 2012-10-17 12:42  bango  阅读(450)  评论(0编辑  收藏  举报