欢迎来到代码驿站!

JavaScript代码

当前位置:首页 > 网页前端 > JavaScript代码

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

时间:2021-04-23 09:28:39|栏目:JavaScript代码|点击:
提供一个背景图片策略:

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代码

下一篇:原生JS实现pc端轮播图效果

本文标题:固定网页背景图同时保持图片比例的思路代码

本文地址:http://www.codeinn.net/misctech/107034.html

推荐教程

广告投放 | 联系我们 | 版权申明

重要申明:本站所有的文章、图片、评论等,均由网友发表或上传并维护或收集自网络,属个人行为,与本站立场无关。

如果侵犯了您的权利,请与我们联系,我们将在24小时内进行处理、任何非本站因素导致的法律后果,本站均不负任何责任。

联系QQ:914707363 | 邮箱:codeinn#126.com(#换成@)

Copyright © 2020 代码驿站 版权所有