使用JQuery的全屏背景图片，自动适应各种屏幕和浏览器

在你的HTML文档加载jQuery库直接从谷歌的CDN

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript"></script>

上面的代码可以插入您的文档头内部的标签，或在最底层，收盘前体标签（通常是建议，以获得更好的性能）。

添加背景图片的标记

 

<div id="bg">
    <img src="image-name.jpg" width="1280" height="800" id="bgimg" />
</div>

更改源属性图像name.jpg映像路径和设置它的实际宽度和高度属性。

 

图像容器的CSS：

body{margin:0px; padding:0px; background:#000;}
#bg{position:fixed; z-index:1; overflow:hidden;}

接下来，我们需要插入一切工作的中心STRECHING proportionaly我们的形象，它的??实际功能。所以在jQuery的夹杂物插入：

<script type="text/javascript">
function FullScreenBackground(theItem){
var winWidth=$(window).width();
var winHeight=$(window).height();
var imageWidth=$(theItem).width();
var imageHeight=$(theItem).height();
var picHeight = imageHeight / imageWidth;
var picWidth = imageWidth / imageHeight;
if ((winHeight / winWidth) < picHeight) {
$(theItem).css("width",winWidth);
$(theItem).css("height",picHeight*winWidth);
} else {
$(theItem).css("height",winHeight);
$(theItem).css("width",picWidth*winHeight);
};
$(theItem).css("margin-left",winWidth / 2 - $(theItem).width() / 2);
$(theItem).css("margin-top",winHeight / 2 - $(theItem).height() / 2);
}
</script>

此功能使图像的宽度和高度伸展，这取决于浏览器和图像尺寸比例。

 

最后，插入的功能，来检查时，我们的页面加载和浏览器的大小：

<script type="text/javascript">
window.onload = function () {
FullScreenBackground('#bgimg');
}
$(window).resize(function() {
FullScreenBackground('#bgimg');
});
</script>

 

 

转载于:https://www.cnblogs.com/shcolo/p/3267875.html