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


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 相关文章推荐
jquery实现的鼠标下拉滚动置顶效果
Jul 24 Javascript
AngularJS实现表单验证
Jan 28 Javascript
Node.js 应用跑得更快 10 个技巧
Apr 03 Javascript
JavaScript数组合并的多种方法
May 22 Javascript
不间断循环滚动效果的实例代码(必看篇)
Oct 08 Javascript
详解Angularjs 如何自定义Img的ng-load 事件
Feb 15 Javascript
详解vue.js+UEditor集成 [前后端分离项目]
Jul 07 Javascript
Vue Cli与BootStrap结合实现表格分页功能
Aug 18 Javascript
swiper.js插件实现pc端文本上下滑动功能示例
Dec 03 Javascript
CKeditor4 字体颜色功能配置方法教程
Jun 26 Javascript
详解Vue后台管理系统开发日常总结(组件PageHeader)
Nov 01 Javascript
小程序实现侧滑删除功能
Jun 25 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中Socket创建与监听实现方法
2015/01/05 PHP
php简单统计在线人数的方法
2016/05/10 PHP
PHP使用ActiveMQ实现消息队列的方法详解
2019/05/31 PHP
php实现简单四则运算器
2020/11/29 PHP
在你的网页中嵌入外部网页的方法
2007/04/02 Javascript
javascript中RegExp保留小数点后几位数的方法分享
2013/08/13 Javascript
利用jQuery实现可输入搜索文字的下拉框
2013/10/23 Javascript
javascript 对象数组根据对象object key的值排序
2015/03/09 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
JavaScript中函数表达式和函数声明及函数声明与函数表达式的不同
2015/11/15 Javascript
实现JavaScript的组成----BOM和DOM详解
2016/05/18 Javascript
jQuery实现的简单百分比进度条效果示例
2016/08/01 Javascript
Js apply方法详解
2017/02/16 Javascript
vue.js实现刷新当前页面的方法教程
2017/07/05 Javascript
页面缩放兼容性处理方法(zoom,Firefox火狐浏览器)
2017/08/29 Javascript
antd Upload 文件上传的示例代码
2018/12/14 Javascript
vue 使用 vue-pdf 实现pdf在线预览的示例代码
2020/04/26 Javascript
微信小程序多列表渲染数据开关互不影响的实现
2020/06/05 Javascript
python使用urllib2实现发送带cookie的请求
2015/04/28 Python
Python简单实现安全开关文件的两种方式
2016/09/19 Python
Python初学者需要注意的事项小结(python2与python3)
2018/09/26 Python
对python中类的继承与方法重写介绍
2019/01/20 Python
ipad上运行python的方法步骤
2019/10/12 Python
python中resample函数实现重采样和降采样代码
2020/02/25 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Python3 socket即时通讯脚本实现代码实例(threading多线程)
2020/06/01 Python
python属于解释型语言么
2020/06/15 Python
Pandas的数据过滤实现
2021/01/15 Python
西班牙在线宠物商店:zooplus.es
2017/02/24 全球购物
Java程序员综合测试题
2014/04/25 面试题
庆八一活动方案
2014/01/25 职场文书
电焊工工作岗位职责
2014/02/06 职场文书
2015年班级元旦晚会活动总结
2014/11/28 职场文书
大学入学感言
2015/08/01 职场文书
html+css合并表格边框的示例代码
2021/03/31 HTML / CSS