提供一个背景图片策略：
1，背景图片固定
2，随窗口大小改变而改变大小
3，保持比例不变而缩放
支持浏览器:IE 6,7,8,9+ ,FF,Chrome
演示地址：http://www.einino.net/bg_image.html
复制代码 代码如下:
<style>
body{margin:0; padding:0;height:2000px; }
#background_img{
top:expression(documentElement.scrollTop); /*we need this expression to fixed the top*/
}
</style>
复制代码 代码如下:
/**
*@desc make a fixed background image. resize the image to fit the window size besides do not lost the image's proportion
*@author EI Nino
*2013/8/15
*/
var imgBackground=function(_img_obj)
{
this.img = _img_obj;
this.init();
}
imgBackground.prototype={
init:function(){
this.img.style.top="0";
this.img.style.left="0";
if(navigator.appVersion.indexOf('MSIE 6.0')>0){
this.img.style.position="absolute";
this.img.style.bottom="auto";
if(!document.body.style.backgroundImage){//esacpe the flash when scroll the window in IE 6
document.body.style.backgroundImage="url(about:blank)";
document.body.style.backgroundAttachment="fixed";
}
}
else{
this.img.style.position="fixed";
}
this.ra = this.img.width/this.img.height;
this.resize();
this.BindEvent();
},
resize:function() {
var self=this;
if((document.documentElement.clientWidth /document.documentElement.clientHeight )>=self.ra)
{
self.img.style.width=document.documentElement.clientWidth+"px";
self.img.style.height="";
}
else{
self.img.style.width="";
self.img.style.height=document.documentElement.clientHeight +"px";
}
},
GetStyle:function(_obj,_style){
var obj = _obj;
return obj.currentStyle? obj.currentStyle[_style] :window.getComputedStyle(obj, null)[_style];
},
BindEvent:function(){
var self = this;
$(window).resize(function(){//use jquery lib
self.resize();
});
}
};
new imgBackground(document.getElementById("background_img"));
【固定网页背景图同时保持图片比例的思路代码】相关文章：