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


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中校验时间格式的正则表达式小结
Sep 22 Javascript
jquery操作复选框(checkbox)的12个小技巧总结
Feb 04 Javascript
用原生js做个简单的滑动效果的回到顶部
Oct 15 Javascript
浅谈jquery中的each方法$.each、this.each、$.fn.each
Jun 23 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
基于vue实现swipe轮播组件实例代码
May 24 Javascript
JS 验证密码 不能为空,必须含有数字、字母、特殊字符,长度在8-12位
Jun 21 Javascript
vue自定义指令directive的使用方法
Apr 07 Javascript
js实现页面多个日期时间倒计时效果
Jun 20 Javascript
vue基于v-charts封装双向条形图的实现代码
Dec 09 Javascript
es6函数name属性功能与用法实例分析
Apr 18 Javascript
vue-列表下详情的展开与折叠案例
Jul 28 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
域名查询代码公布
2006/10/09 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
浅析php工厂模式
2014/11/25 PHP
php获取linux命令结果的实例
2017/03/13 PHP
php实现与python进行socket通信的方法示例
2017/08/30 PHP
Laravel框架分页实现方法分析
2018/06/12 PHP
[IE&amp;FireFox兼容]JS对select操作
2007/01/07 Javascript
ImageZoom 图片放大镜效果(多功能扩展篇)
2010/04/14 Javascript
window.open 以post方式传递参数示例代码
2014/02/27 Javascript
javascript给span标签赋值的方法
2015/11/26 Javascript
JS/jquery实现一个网页内同时调用多个倒计时的方法
2017/04/27 jQuery
JS自定义滚动条效果简单实现代码
2020/10/27 Javascript
解决vue 更改计算属性后select选中值不更改的问题
2018/03/02 Javascript
Nodejs实现多文件夹文件同步
2018/10/17 NodeJs
jquery获取img的src值实例介绍
2019/01/16 jQuery
详解javascript对数组和json数组的操作
2019/04/15 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
vue脚手架项目创建步骤详解
2021/03/02 Vue.js
Python Web程序部署到Ubuntu服务器上的方法
2018/02/22 Python
Python网络爬虫之爬取微博热搜
2019/04/18 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
如何使用Python 打印各种三角形
2019/06/28 Python
Python操作多维数组输出和矩阵运算示例
2019/11/28 Python
tensorflow 实现自定义layer并添加到计算图中
2020/02/04 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
关于Python turtle库使用时坐标的确定方法
2020/03/19 Python
使用layui实现左侧菜单栏及动态操作tab项的方法
2020/11/10 HTML / CSS
英国最大的奢侈品零售网络商城:Flannels
2016/09/16 全球购物
如何写一个Java类既可以用作applet也可以用作java应用
2016/01/18 面试题
老师给学生的表扬信
2014/01/17 职场文书
料理师求职信
2014/01/30 职场文书
中班中秋节活动反思
2014/02/18 职场文书
2015年语文教学工作总结
2015/05/25 职场文书
幼儿园体操比赛口号
2015/12/25 职场文书
学习党史心得体会2016
2016/01/23 职场文书
500字作文之周记
2019/12/13 职场文书