您好,欢迎访问一九零五行业门户网

固定网页背景图同时保持图片比例的思路代码_javascript技巧

提供一个背景图片策略:
1,背景图片固定
2,随窗口大小改变而改变大小
3,保持比例不变而缩放
支持浏览器:ie 6,7,8,9+ ,ff,chrome
演示地址:http://www.einino.net/bg_image.html
复制代码 代码如下:
复制代码 代码如下:
/**
*@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));
其它类似信息

推荐信息