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

 更新时间:2013年08月15日 16:56:05   作者:  
代码功能:背景图片固定,随窗口大小改变而改变大小,保持比例不变而缩放,有此需求的朋友可以参考下
提供一个背景图片策略:

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

相关文章

  • uniapp使用uni自带websocket进行即时通讯详细步骤

    uniapp使用uni自带websocket进行即时通讯详细步骤

    在开发程序过程中通信功能还是比较常用到的,下面这篇文章主要给大家介绍了关于uniapp使用uni自带websocket进行即时通讯的详细步骤,文中通过代码介绍的非常详细,需要的朋友可以参考下
    2023-11-11
  • 一篇文章让你轻松记住js的隐式转化

    一篇文章让你轻松记住js的隐式转化

    这篇文章主要给大家介绍了如何通过一篇文章让你轻松记住js的隐式转化的相关资料,通过在各种情况下发生的隐式类型的例子,来详细的了解隐式类型转换的过程,需要的朋友可以参考下
    2022-01-01
  • 在小程序中推送模板消息的实现方法

    在小程序中推送模板消息的实现方法

    这篇文章主要介绍了在小程序中推送模板消息的实现方法,本文给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-07-07
  • 用JavaScript实现贪吃蛇游戏

    用JavaScript实现贪吃蛇游戏

    这篇文章主要为大家详细介绍了用JavaScript实现贪吃蛇游戏,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-10-10
  • javascript算法解数独实现方案示例

    javascript算法解数独实现方案示例

    这篇文章主要为大家介绍了javascript算法解数独实现方案示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • JS实现的tab切换选项卡效果示例

    JS实现的tab切换选项卡效果示例

    这篇文章主要介绍了JS实现的tab切换选项卡效果,结合具体实例形式分析了JS通过鼠标事件触发自定义函数控制页面元素样式变换实现tab切换功能的相关实现技巧,需要的朋友可以参考下
    2017-02-02
  • JS实现图表日期分类按色显示效果

    JS实现图表日期分类按色显示效果

    这篇文章主要介绍了JS实现图表日期分类按色显示,文中需要注意若 iOS 手机预览时显示NaN ,可能是时间格式的问题,本文给大家介绍的非常详细,需要的朋友可以参考下
    2024-05-05
  • 微信小程序日历/日期选择插件使用方法详解

    微信小程序日历/日期选择插件使用方法详解

    这篇文章主要为大家详细介绍了微信小程序日历和日期选择插件的使用方法,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-12-12
  • uni-app返回上一个页面并进行页面刷新的方法

    uni-app返回上一个页面并进行页面刷新的方法

    这篇文章主要给大家介绍了关于uni-app返回上一个页面并进行页面刷新的相关资料,返回上一页面在uniapp有多种方法,文中给出了详细的图文示例,需要的朋友可以参考下
    2023-07-07
  • javascript闭包(Closure)用法实例简析

    javascript闭包(Closure)用法实例简析

    这篇文章主要介绍了javascript闭包(Closure)用法,结合实例形式较为详细的分析了JavaScript闭包的概念、功能及使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-11-11

最新评论