qinco

easyBgImg.js / 全画幅响应式背景图js插件 / 版本:0.12

在很多场合下,我们都需要使用全画幅的背景图,同时又希望不要产生比例畸变。本插件是我们的御用插件之一,无需多言,直接上代码和示例:

使用方式:

1、加载jquery库:

<script src='http://upcdn.b0.upaiyun.com/libs/jquery/jquery-1.10.2.min.js'></script>

2、在</body>之前调用以下js文件:

<script src='http://lib.qinco.me/dist/easyBgImg/0.12.js'></script>

<script type='text/javascript'>

$(window).on('load resize', function() {

$('.myWrapper').easyBgImg();

});

</script>

1、基本使用:

<div class="myWrapper" data-w="1920" data-h="760" data-img="http://qinco.net/rhino.jpg"></div>
参数说明:
div class="myWrapper" ...: 定义一个容器
data-w: 图片源文件的原始宽度(单位是像素)
data-h: 图片源文件的原始高度(单位是像素)
data-img: 图片源文件的网址
在基本使用的模式下,js会自动根据图片和浏览器的尺寸来设置容器和背景图的高度,效果如下:

2、自定义不同屏幕尺寸下的背景高度

<div class="myWrapper" data-w="1920" data-h="760" data-img="http://qinco.net/rhino.jpg"
data-default="180px" data-xs="200px" data-sm="300px"
data-md="234px" data-lg="400px"
></div>
自定义参数说明:
data-default="180px" (可选) : 容器的初始高度限制为180px
data-xs="200px" (可选) : 当浏览器宽度在30em~42em之间时,容器的高度限制为200px
data-sm="300px" (可选) : 当浏览器宽度在42em~56em之间时,容器的高度限制为300px
data-md="234px" (可选) : 当浏览器宽度在56em~72em之间时,容器的高度限制为234px
data-lg="400px" (可选) : 当浏览器宽度大于72em时,容器的高度限制为400px
根据上面定义的额外参数,js会自动计算背景图片所需的参数,效果如下(请缩放浏览器查看变化):

3、加入垂直居中的内容

<div class="myWrapper" ....自定义你的参数.... >
<div class="table">
<div class="tablecell" style="text-align: center">
<h3>这里可以写一个标题</h3>
<button>我是一个按钮</button>
</div>
</div>
</div>
自定义参数说明:
只需要插入.table 和 .tablecell 这两层子容器即可
.table 和 .tablecell 的css已经在js插件里定义好了,可以让里面的内容垂直居中显示

这里可以写一个标题

4、根据内容的高度进行自适应

<div class="myWrapper" data-default="auto" data-w="1920" data-h="580" data-img="..." >
<div class="table">
<div class="tablecell" style="text-align: center">
<p>在这里放置任意长度的内容,容器会自动调整高度:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ipsum aliquet, vestibulum tellus nec, pharetra quam. Sed ornare et magna eu luctus. Maecenas non fringilla libero, vitae tempus sem. Proin massa arcu, finibus at justo quis, ultricies suscipit mauris. Praesent blandit sem id sem congue, at bibendum est ornare. Curabitur facilisis laoreet odio sit amet efficitur. Duis et erat non enim gravida ultricies....</p>
</div>
</div>
</div>
自定义参数说明:
只需要设置:data-default='auto'

在这里放置任意长度的内容,容器会自动调整高度:Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus quis ipsum aliquet, vestibulum tellus nec, pharetra quam. Sed ornare et magna eu luctus. Maecenas non fringilla libero, vitae tempus sem. Proin massa arcu, finibus at justo quis, ultricies suscipit mauris. Praesent blandit sem id sem congue, at bibendum est ornare. Curabitur facilisis laoreet odio sit amet efficitur. Duis et erat non enim gravida ultricies....

源代码:http://lib.qinco.me/dist/easyBgImg/0.12.js

授权方式:The MIT License (MIT)

意见/反馈:hello@qinco.net