|
功能：背景图片始终与窗口大小一致。
主要代码下：
(function($) {
$.fn.fullBg = function(){
var bgImg = $(this); function resizeImg() {
var imgwidth = bgImg.width();
var imgheight = bgImg.height(); var winwidth = $(window).width();
var winheight = $(window).height(); var widthratio = winwidth / imgwidth;
var heightratio = winheight / imgheight; var widthdiff = heightratio * imgwidth;
var heightdiff = widthratio * imgheight; if(heightdiff>winheight) {
bgImg.css({
width: winwidth+'px',
height: heightdiff+'px'
});
} else {
bgImg.css({
width: widthdiff+'px',
height: winheight+'px'
});
}
}
resizeImg();
$(window).resize(function() {
resizeImg();//当窗口大小变化时改变图片的大小
});
};
})(jQuery)
主要结构：
<img src="your-background-image.jpg" alt="" id="background" />
<div id="maincontent">
<!-- Your site content goes here -->
</div>
相关样式：
.fullBg {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
width: 100%;
} #maincontent {
position: absolute;
top: 0;
left: 0;
z-index: 50;
}
DEMO：http://www.veryhuo.com/a/Demo/2010/jQuery-fullback.html
英文演示：http://bavotasan.com/demos/fullbg/
作者：Rady Huang
出处：http://www.radys.cn/article.asp?id=263 （编辑：核心网）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
