固定网页背景图同时保持图片比例的思路代码_Javascript教程-查字典教程网
固定网页背景图同时保持图片比例的思路代码
固定网页背景图同时保持图片比例的思路代码
发布时间:2016-12-30 来源:查字典编辑
摘要:提供一个背景图片策略:1,背景图片固定2,随窗口大小改变而改变大小3,保持比例不变而缩放支持浏览器:IE6,7,8,9+,FF,Chrome...

提供一个背景图片策略:

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

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类