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


Posted in Javascript onAugust 15, 2013

提供一个背景图片策略:

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开发包大全整理
Dec 22 Javascript
通过JS 获取Mouse Position(鼠标坐标)的代码
Sep 21 Javascript
Jquery 扩展方法
May 06 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
Apr 25 Javascript
Javascript拓展String方法小结
Jul 08 Javascript
解析URI与URL之间的区别与联系
Nov 22 Javascript
屏蔽相应键盘按钮操作
Mar 10 Javascript
javascript中setTimeout和setInterval的unref()和ref()用法示例
Nov 26 Javascript
javascript实现点击商品列表checkbox实时统计金额的方法
May 15 Javascript
React Native使用fetch实现图片上传的示例代码
Mar 07 Javascript
Node.JS段点续传:Nginx配置文件分段下载功能的实现方法
Mar 12 Javascript
javascript设计模式 ? 抽象工厂模式原理与应用实例分析
Apr 09 Javascript
jQuery UI 实现email输入提示实例
Aug 15 #Javascript
javascript中如何处理引号编码&amp;#034;
Aug 15 #Javascript
Jquery中val()表单取值赋值的实例代码
Aug 15 #Javascript
jquery ajax方式直接提交整个表单核心代码
Aug 15 #Javascript
js冒泡法和数组转换成字符串示例代码
Aug 14 #Javascript
js实现无需数据库的县级以上联动行政区域下拉控件
Aug 14 #Javascript
Extjs3.0 checkboxGroup 动态添加item实现思路
Aug 14 #Javascript
You might like
Zend Guard使用指南及问题处理
2015/01/07 PHP
PHP函数nl2br()与自定义函数nl2p()换行用法分析
2016/04/02 PHP
php获取一定范围内取N个不重复的随机数
2016/05/28 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
PHP简单实现防止SQL注入的方法
2018/03/13 PHP
PHP实现二维数组中的查找算法小结
2018/06/09 PHP
js函数般调用正则
2008/04/08 Javascript
javascript与CSS复习(二)
2010/06/29 Javascript
javascript之typeof、instanceof操作符使用探讨
2013/05/19 Javascript
JavaScript 32位整型无符号操作示例
2013/12/08 Javascript
javaScript 页面自动加载事件详解
2014/02/10 Javascript
jquery+css3打造一款ajax分页插件(自写)
2014/06/18 Javascript
原生JS实现仿淘宝网左侧商品分类菜单效果代码
2015/09/10 Javascript
Nodejs多站点切换Htpps协议详解及简单实例
2017/02/23 NodeJs
node.js入门教程之querystring模块的使用方法
2017/02/27 Javascript
纯JS实现的读取excel文件内容功能示例【支持所有浏览器】
2018/06/23 Javascript
vue弹窗插件实战代码
2018/09/08 Javascript
浅谈Vue CLI 3结合Lerna进行UI框架设计
2019/04/14 Javascript
js中let能否完全替代IIFE
2019/06/15 Javascript
react+redux仿微信聊天界面
2019/06/21 Javascript
vue绑定数字类型 value为数字的实例
2020/08/31 Javascript
python获取命令行输入参数列表的实例代码
2018/06/23 Python
【python】matplotlib动态显示详解
2019/04/11 Python
利用pandas向一个csv文件追加写入数据的实现示例
2020/04/23 Python
基于CSS3的animation属性实现微信拍一拍动画效果
2020/06/22 HTML / CSS
使用HTML5 IndexDB存储图像和文件的示例
2018/11/05 HTML / CSS
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
英国最大的宠物商店:Pets at Home
2019/04/17 全球购物
.NET常见笔试题集
2012/12/01 面试题
中学教师管理制度
2014/01/14 职场文书
军神教学反思
2014/02/04 职场文书
军训感想500字
2014/02/20 职场文书
优秀毕业生推荐信范文
2014/03/07 职场文书
应届生面试求职信
2014/07/02 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
导游词之云南丽江-泸沽湖
2019/09/26 职场文书