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


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 相关文章推荐
在IE上直接编辑网页内容的js代码(IE地址栏js)
Apr 27 Javascript
Prototype String对象 学习
Jul 19 Javascript
显示js对象所有属性和方法的函数
Oct 16 Javascript
javascript 兼容所有浏览器的DOM扩展功能
Aug 01 Javascript
js中substring和substr两者区别和使用方法
Nov 09 Javascript
JS基础随笔(菜鸟必看篇)
Jul 13 Javascript
js实现点击每个li节点,都弹出其文本值及修改
Dec 15 Javascript
linux 后台运行node服务指令方法
May 23 Javascript
js实现图片上传并预览功能
Aug 06 Javascript
JavaScript实现图片的放大缩小及拖拽功能示例
May 14 Javascript
微信小程序页面间传递数组对象方法解析
Nov 06 Javascript
vue+iview实现文件上传
Nov 17 Vue.js
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
人族 TERRAN 概述
2020/03/14 星际争霸
php检索或者复制远程文件的方法
2015/03/13 PHP
从零开始学习jQuery (三) 管理jQuery包装集
2011/02/23 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
2012/10/11 Javascript
在JavaScript中实现类的方式探讨
2013/08/28 Javascript
js动画效果制件让图片组成动画代码分享
2014/01/14 Javascript
学习JavaScript设计模式(接口)
2015/11/26 Javascript
jQuery中hover方法搭配css的hover选择器,实现选中元素突出显示方法
2017/05/08 jQuery
JS实现无缝循环marquee滚动效果
2017/05/22 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
2017/10/21 Javascript
tweenjs缓动算法的使用实例分析
2019/08/26 Javascript
微信小程序常用的3种提示弹窗实现详解
2019/09/19 Javascript
react quill中图片上传由默认转成base64改成上传到服务器的方法
2019/10/30 Javascript
js实现金山打字通小游戏
2020/07/24 Javascript
JavaScript中while循环的基础使用教程
2020/08/11 Javascript
Python中的Numpy入门教程
2014/04/26 Python
Python装饰器的函数式编程详解
2015/02/27 Python
python实现简单socket程序在两台电脑之间传输消息的方法
2015/03/13 Python
浅谈Python处理PDF的方法
2017/11/10 Python
python实现寻找最长回文子序列的方法
2018/06/02 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
python梯度下降法的简单示例
2018/08/31 Python
python之yield和Generator深入解析
2019/09/18 Python
Python 利用argparse模块实现脚本命令行参数解析
2020/12/28 Python
整理的15个非常有用的 HTML5 开发教程和速查手册
2011/10/18 HTML / CSS
来自Ocado的宠物商店:Fetch
2018/07/10 全球购物
设置器与访问器的定义以及各自特点
2016/01/08 面试题
大学生职业生涯设计书
2014/01/02 职场文书
党校培训思想汇报
2014/01/03 职场文书
创业计划书的内容步骤和要领
2014/01/04 职场文书
工程力学专业自荐信范文
2014/03/17 职场文书
小学庆六一活动总结
2014/08/28 职场文书
药品开票员岗位职责
2015/04/15 职场文书
SQL优化老出错,那是你没弄明白MySQL解释计划用法
2021/11/27 MySQL
MySQL分区以及建索引的方法总结
2022/04/13 MySQL
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android