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


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 相关文章推荐
农历与西历对照
Sep 06 Javascript
Javascript load Page,load css,load js实现代码
Mar 31 Javascript
jQuery对表单元素的取值和赋值操作代码
May 19 Javascript
图片Slider 带左右按钮的js示例
Aug 30 Javascript
JS实现超简单的鼠标拖动效果
Nov 02 Javascript
JavaScript利用闭包实现模块化
Jan 13 Javascript
通俗解释JavaScript正则表达式快速记忆
Aug 23 Javascript
jQuery实现的文字逐行向上间歇滚动效果示例
Sep 06 jQuery
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
小程序获取周围IBeacon设备的方法
Oct 31 Javascript
如何解决js函数防抖、节流出现的问题
Jun 17 Javascript
JS实现数据动态渲染的竖向步骤条
Jun 24 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
php addslashes 函数详细分析说明
2009/06/23 PHP
支付宝接口开发集成支付环境小结
2015/03/17 PHP
PHP实现将上传图片自动缩放到指定分辨率,并保持清晰度封装类示例
2019/06/17 PHP
Avengerls vs Newbee BO3 第一场2.18
2021/03/10 DOTA
对YUI扩展的Gird组件 Part-1
2007/03/10 Javascript
一个用javascript写的select支持上下键、首字母筛选以及回车取值的功能
2009/09/09 Javascript
用js实现的模拟jquery的animate自定义动画(2.5K)
2010/07/20 Javascript
javascript获取浏览器类型和版本的方法(js获取浏览器版本)
2014/03/13 Javascript
node.js中的console.timeEnd方法使用说明
2014/12/09 Javascript
JS实现文字链接感应鼠标淡入淡出改变颜色的方法
2015/02/26 Javascript
jQuery构造函数init参数分析续
2015/05/13 Javascript
JS在Chrome浏览器中showModalDialog函数返回值为undefined的解决方法
2016/08/03 Javascript
Vue.js每天必学之过滤器与自定义过滤器
2016/09/07 Javascript
react性能优化达到最大化的方法 immutable.js使用的必要性
2017/03/09 Javascript
Vue-cli3项目配置Vue.config.js实战记录
2018/07/29 Javascript
浅谈关于JS下大批量异步任务按顺序执行解决方案一点思考
2019/01/08 Javascript
jquery弹窗时禁止body滚动条滚动的例子
2019/09/21 jQuery
vue路由的配置和页面切换详解
2020/09/09 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
python中PIL安装简单教程
2016/04/21 Python
python正则表达式的使用
2017/06/12 Python
机器学习python实战之手写数字识别
2017/11/01 Python
用Python+OpenCV对比图像质量的几种方法
2019/07/15 Python
把django中admin后台界面的英文修改为中文显示的方法
2019/07/26 Python
详解字符串在Python内部是如何省内存的
2020/02/03 Python
Python %r和%s区别代码实例解析
2020/04/03 Python
python不同系统中打开方法
2020/06/23 Python
Python同时迭代多个序列的方法
2020/07/28 Python
工伤死亡理赔协议书
2014/10/20 职场文书
学习型家庭事迹材料
2014/12/20 职场文书
优秀校长事迹材料
2014/12/24 职场文书
工作收入证明模板
2015/06/12 职场文书
军训后的感想
2015/08/07 职场文书
小学班级管理心得体会
2016/01/07 职场文书
详细介绍python操作RabbitMq
2022/04/12 Python