当前位置:首页 > 网站制作 > jQuery教程 > jQuery插件:全背景图插件(Full Size Background Image)

jquerybackground jQuery插件:全背景图插件(Full Size Background Image)

2017-01-09 | 来源:网络 | 人气: | | 关键字: jquerybackground jquery波浪背景插件
功能:背景图片始终与窗口大小一致。主要代码下:(function($) { $.fn.fullBg = function(){ var bgImg = $(this); function resize

功能:背景图片始终与窗口大小一致。

fullbg Full Size Background Image jQuery Plugin

主要代码下:

(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: [Www.aloNely.Com.Cn]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.wfuyu.com/a/Demo/2010/jQuery-fullback.html

英文演示:http://bavotasan.com/demos/fullbg/

作者:Rady Huang
出处:http://www.radys.cn/article.asp?id=263

评论

评论数10

表情
发表评论
网友评论仅供其表达个人看法,并不表明网易立场。
《jQuery插件:全背景图插件(Full Size Background Image)》更多评论

头条推荐

阅读下一篇

jQuery MD5 加密插件及使用方法

有时候我们想在js里面使用加密,jQuery就提供了这样的插件,用法十分简单: $(md("你想要加密的字符串")); Md5插件下载地址:http://www.wfuyu.com/uploads/C ... 查看全文

返回jQuery教程 返回网站首页