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

215 阅读 0 评论 142 点赞

我是靠谱客的博主忧心荔枝，最近开发中收集的这篇文章主要介绍固定网页背景图同时保持图片比例的思路代码，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

提供一个背景图片策略：

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