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


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 相关文章推荐
js常用代码段收集
Oct 28 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
JavaScript如何动态创建table表格
Aug 02 Javascript
canvas快速绘制圆形、三角形、矩形、多边形方法介绍
Dec 29 Javascript
简单谈谈关于 npm 5.0 的新坑
Jun 08 Javascript
vue2.0使用swiper组件实现轮播的示例代码
Mar 03 Javascript
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
vue首次赋值不触发watch的解决方法
Sep 11 Javascript
详解Vue用cmd创建项目
Feb 12 Javascript
详解Vue 匿名、具名和作用域插槽的使用方法
Apr 22 Javascript
js通过canvas生成图片缩略图
Oct 02 Javascript
关于vue属性使用和不使用冒号的区别说明
Oct 22 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实现递归的三种基本方式
2020/07/04 PHP
PHP 无限级分类
2017/05/04 PHP
用js实现键盘方向键翻页功能的代码
2007/06/03 Javascript
关于JavaScript的with 语句的使用方法
2011/05/09 Javascript
script标签属性type与language使用选择
2012/12/02 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
jQuery解析与处理服务器端返回xml格式数据的方法详解
2016/07/04 Javascript
js 实现数值的千分位及保存小数方法(推荐)
2016/08/01 Javascript
Bootstrap栅格系统的使用详解
2017/10/30 Javascript
微信小程序自定义弹窗实现详解(可通用)
2019/07/04 Javascript
express中static中间件的具体使用方法
2019/10/17 Javascript
javascript实现弹出层效果
2019/12/10 Javascript
vue 调用 RESTful风格接口操作
2020/08/11 Javascript
简单介绍Python2.x版本中的cmp()方法的使用
2015/05/20 Python
Python实现屏幕截图的代码及函数详解
2016/10/01 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
numpy库reshape用法详解
2020/04/19 Python
Python如何输出整数
2020/06/07 Python
纯CSS3实现鼠标悬停提示气泡效果
2014/02/28 HTML / CSS
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
澳大利亚先进的皮肤和激光诊所购物网站:Soho Skincare
2018/10/15 全球购物
煤矿班组长岗位职责
2013/12/29 职场文书
工作室成员个人发展规划范文
2014/01/24 职场文书
小学生秋游活动方案
2014/02/23 职场文书
《狮子和兔子》教学反思
2014/03/02 职场文书
目标责任书范文
2014/04/14 职场文书
简易离婚协议书范本2014
2014/10/15 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
2019年度行政文员工作计划范本!
2019/07/04 职场文书
python使用tkinter实现透明窗体上绘制随机出现的小球(实例代码)
2021/05/17 Python
python识别围棋定位棋盘位置
2021/07/26 Python
教你使用Jenkins集成Harbor自动发布镜像
2022/04/03 Servers
项目中Nginx多级代理是如何获取客户端的真实IP地址
2022/05/30 Servers
Win11 KB5015814遇安装失败 影响开始菜单性能解决方法
2022/07/15 数码科技