欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-04-17 15:33:25
...
提供一个背景图片策略:

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"));