固定網頁背景圖同時保持圖片比例的思路代碼_javascript技巧

提供一個背景圖片策略：

1，背景圖片固定

2，隨視窗大小改變而改變大小

3，保持比例不變而縮放

支援瀏覽器:IE 6,7,8,9 ,FF,Chrome

簡報位址：http://www.einino.net/bg_image.html

複製程式碼 程式碼如下:

🎜>

複製程式碼 程式碼如下:

/**
*@desc 製作固定背景圖。調整影像大小以適應視窗大小，且不要遺失影像的比例
*@author EI Nino
*2013/8/15
>var imgBackground=function(_img_obj)
{
this.img = _img_obj;
this.init();
}
imgBackground.prototype={ ; {
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(mj, null)[_obj, null)[_obj, null)[_obj, null)[_obj, null)[_obj, null)[_obj, null)。
BindEvent:function(){
var self = this;
$(window).resize(function(){//use jquery lib
self.resize();
})) ;
}
};
new imgBackground(document.getElementById("background_img"));