利用onresize使得div可以随着屏幕大小而自适应的代码


Posted in Javascript onJanuary 15, 2010

当我们让div居中时候,一般有两种方法,一种是固定左右宽度,也就是使用像素绝对定位;另一种是用百分比来相对定位,在这种两种方式下,绝对定位是不能让div随着屏幕而自适应的,而用百分比就可以,但是,是用百分比就会有一个新的问题,如果我们的页面中有这么一句
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
的时候,top的百分比将会失效,而删除这句话的时候,一切正常,都是不知道这句标准的声明为什么会带来如此的不便
针对这个问题,我使用的下面的方法来实现div的自适应
首先 我用的是绝对定位的方式,先设置好div的左右上下边距。在body中添加两个事件,
<body bgcolor="#666666" onresize="test()" onload="getwah()">
getwah()用来获取屏幕的大小和div的各个边距,并计算出它们的差

var height,width,width_cha1,width_cha2; 
function getwah() 
{ 
if(document.documentElement && document.documentElement.clientWidth) 
{d_width = document.documentElement.clientWidth;} 
else if(document.body) 
{d_width = document.body.clientWidth;} 
width=parseInt(d_width); 
width_cha1=width-parseInt(document.getElementById("backi").style.left) 
width_cha2=width-parseInt(document.getElementById("massage_box").style.left) 
}

当屏幕大小变化的时候(onresize)触发test()函数,该函数就是用户根据之前获得屏幕与边距的差值重新设置div的边距,这样就可以实现党屏幕的大小改变后,div的边距也会相应地改变,从而实现div可以随着屏幕大小的改变而自适应
function test() 
{ 
if(document.documentElement && document.documentElement.clientWidth) 
{d_width = document.documentElement.clientWidth;} 
else if(document.body) 
{d_width = document.body.clientWidth;} 
var now_left1=parseInt(d_width )-width_cha1; 
var now_left2=parseInt(d_width )-width_cha2; 
document.getElementById("backi").style.left=now_left1 
document.getElementById("massage_box").style.left=now_left2 
}
Javascript 相关文章推荐
网站上面有这种切换效果
Jun 26 Javascript
简明json介绍
Sep 28 Javascript
jQuery UI插件自定义confirm确认框的方法
Mar 20 Javascript
浅谈JavaScript对象的创建方式
Jun 13 Javascript
JS前端加密算法示例
Dec 22 Javascript
jQuery动态添加.active 实现导航效果代码思路详解
Aug 29 jQuery
微信小程序实现自定义picker选择器弹窗内容
May 26 Javascript
webpack4.0 入门实践教程
Oct 08 Javascript
node.js实现为PDF添加水印的示例代码
Dec 05 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
Vue学习笔记之计算属性与侦听器用法
Dec 07 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
javascript 不间断的图片滚动并可点击
Jan 15 #Javascript
Span元素的width属性无效果原因及解决方案
Jan 15 #Javascript
javascript实现的基于金山词霸网络翻译的代码
Jan 15 #Javascript
JQuery 引发两次$(document.ready)事件
Jan 15 #Javascript
用jQuery扩展自写的 UI导航
Jan 13 #Javascript
jQuery的一些特性和用法整理小结
Jan 13 #Javascript
JavaScript关于select的相关操作说明
Jan 13 #Javascript
You might like
使用phpstorm和xdebug实现远程调试的方法
2015/12/29 PHP
Yii2表单事件之Ajax提交实现方法
2017/05/04 PHP
php传值和传引用的区别点总结
2019/11/19 PHP
Aster vs Newbee BO5 第二场2.19
2021/03/10 DOTA
IE8 兼容性问题(属性名区分大小写)
2009/06/04 Javascript
Mootools 1.2教程 滑动效果(Slide)
2009/09/15 Javascript
js鼠标左右键 键盘值小结
2010/06/11 Javascript
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
js中的屏蔽的使用示例
2013/07/30 Javascript
基于javascript实现判断移动终端浏览器版本信息
2014/12/09 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
jquery动态改变div宽度和高度
2015/02/09 Javascript
js实现prototype扩展的方法(字符串,日期,数组扩展)
2016/01/14 Javascript
Treegrid的动态加载实例代码
2016/04/29 Javascript
js获取html的span标签的值方法(超简单)
2016/07/26 Javascript
jquery easyui validatebox remote的使用详解
2016/11/09 Javascript
利用vue和element-ui设置表格内容分页的实例
2018/03/02 Javascript
vue .js绑定checkbox并获取、改变选中状态的实例
2018/08/24 Javascript
基于mpvue的简单弹窗组件mptoast使用详解
2019/08/02 Javascript
原生js实现3D轮播图
2020/03/21 Javascript
用JS实现一个简单的打砖块游戏
2019/12/11 Javascript
React中使用UMEditor的方法示例
2019/12/27 Javascript
vue中axios封装使用的完整教程
2021/03/03 Vue.js
Python cookbook(数据结构与算法)找出序列中出现次数最多的元素算法示例
2018/03/15 Python
python实现requests发送/上传多个文件的示例
2018/06/04 Python
pandas 数据结构之Series的使用方法
2019/06/21 Python
Python中注释(多行注释和单行注释)的用法实例
2019/08/28 Python
python实现电子词典
2020/03/03 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
幼儿园父亲节活动方案
2014/03/11 职场文书
自主招生推荐信范文
2014/05/10 职场文书
医院护士党的群众路线教育实践活动对照检查材料思想汇报
2014/10/04 职场文书
加入学生会自荐书
2015/03/05 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
PyQt5实现多张图片显示并滚动
2021/06/11 Python
微软Win11有哪些隐藏功能? windows11多个功能汇总
2021/11/21 数码科技