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


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和jquery判断浏览器版本等信息
Jul 04 Javascript
asm.js使用示例代码
Nov 28 Javascript
利用jquery操作Radio方法小结
Oct 20 Javascript
JSONP跨域请求实例详解
Jul 04 Javascript
jQuery绑定事件的四种方式介绍
Oct 31 Javascript
layer弹出层中H5播放器全屏出错的解决方法
Feb 21 Javascript
Vue.js bootstrap前端实现分页和排序
Mar 10 Javascript
微信小程序微信支付接入开发实例详解
Apr 12 Javascript
vue.js源代码core scedule.js学习笔记
Jul 03 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
Vue项目打包、合并及压缩优化网页响应速度
Jul 07 Vue.js
JS class语法糖的深入剖析
Jul 07 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的call_user_func传reference引发的思考
2010/07/23 PHP
让php处理图片变得简单 基于gb库的图片处理类附实例代码下载
2011/05/17 PHP
10个实用的PHP代码片段
2011/09/02 PHP
php使用json_decode后数字对象转换成了科学计数法的解决方法
2017/02/20 PHP
php intval函数用法总结
2019/04/14 PHP
php7 list()、session及其他模块的修改实例分析
2020/05/25 PHP
JavaScript Undefined,Null类型和NaN值区别
2008/10/22 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
jquery入门——事件机制之事件中的冒泡现象示例解释
2020/09/12 Javascript
jquery使用jquery.zclip插件复制对象的实例教程
2013/12/04 Javascript
jquery中attr和prop的区别分析
2015/03/16 Javascript
jQuery弹簧插件编写基础之“又见弹窗”
2015/12/11 Javascript
JavaScript类型系统之正则表达式
2016/01/05 Javascript
谈一谈javascript闭包
2016/01/28 Javascript
jquery显示隐藏元素的实现代码
2016/05/19 Javascript
JS实现的添加弹出层并完成锁屏操作示例
2017/04/07 Javascript
详谈jQuery中使用attr(), prop(), val()获取value的异同
2017/04/25 jQuery
Koa项目搭建过程详细记录
2018/04/12 Javascript
深入浅析Vue中的 computed 和 watch
2018/06/06 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
解决新建一个vue项目过程中遇到的问题
2020/10/22 Javascript
node脚手架搭建服务器实现token验证的方法
2021/01/20 Javascript
Flask框架的学习指南之开发环境搭建
2016/11/20 Python
python实现弹跳小球
2019/05/13 Python
关于阿里云oss获取sts凭证 app直传 python的实例
2019/08/20 Python
Python嵌套函数,作用域与偏函数用法实例分析
2019/12/26 Python
手把手教你安装Windows版本的Tensorflow
2020/03/26 Python
CSS3实现鼠标悬停显示扩展内容
2016/08/24 HTML / CSS
农村婚礼证婚词
2014/01/08 职场文书
2014党员自我评议表范文
2014/09/20 职场文书
2014年学生工作总结
2014/11/20 职场文书
党员反腐倡廉学习心得体会
2015/08/15 职场文书
用人单位的规章制度,怎样制定才是有效的?
2019/07/09 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
Python3的进程和线程你了解吗
2022/03/16 Python