通过JavaScript使Div居中并随网页大小改变而改变


Posted in Javascript onJune 24, 2013

在使用Java做后台的时候,都会做到登录的页面,但是自己的页面太难看了,要居中没居中,要颜色没颜色,但是无论是怎么样都得使登录的框居中吧!以前的想法是通过CSS+Div使div居中,但是现在的想法变了,通过JavaScript可以简单的使Div在页面上居中,随着网页大小的改变做出相应的改变。而且只要明白了居中的原理轻而易举的就可以实现了。
先看一下居中的原理吧!
先看一张图。
通过JavaScript使Div居中并随网页大小改变而改变 
从图中看到了什么?可以看到红色的框居中了,为什么会居中呢?通过观察可以发现红框的上下的蓝色的间距线是一样长的,这样可以确保了垂直居中,红框的左右的绿色间距线也是一样长的,这样可以确保了水平居中。
但是怎么使上下的间距相等呢?左右的间距相等呢?
在看一张图:
通过JavaScript使Div居中并随网页大小改变而改变 
假设当前网页的高为350px,宽为400px,而红框的高为150px,宽为200px,我们可以发现网页的高减去红框元素的高得到200px像素,而这200px像素正是上下边距的总和,上下边距各得到了100px,同理,左右也是一样的。
有没有感觉到什么?
如果我们知道了网页元素的高或宽,减去元素的高或宽,然后在除以2,就得到了上下左右边距的距离。我们通常给元素的定位是怎么定的呢?不都是通过top和left的坐标定的吗?那么现在红框的坐标是什么呢?
再看一张图:
通过JavaScript使Div居中并随网页大小改变而改变 
红色框的坐标是蓝色的上线100px,和绿色的左线100px,即left和top的值,这两个值不是算出来的吗?
可以总结一个公式:
居中的元素的top =(网页高 ?元素的高)/ 2;
居中的元素的left= (网页宽 ?元素的宽) /2;
转化为JavaScript的语法为:
top = (document.body.clientHeight - element.offsetHeight)/2;
left = (document.body.clientWidth - element.offsetWidth)/2
获取到top和left的坐标不就居中了。
以下是居中的完整代码:
这里要注意几个问题,要设置元素的position的属性为absolute,即绝对定位,然后添加两个事件onload和onresize,要加上px的字符串,offsetHeight是获取元素自身的高,offsetWidth是获取元素自身的宽,这就是当网页加载时和改变大小时div都会居中。不过这种做法是居中的元素和网页的居中,如果想要一个元素在另一个元素的内部居中的话,原理是一样的。我们只需要将网页的宽和高的代码改为另一个元素的宽和高的代码就行了。另一个元素的宽和高可以通过获取到当前元素的parent元素的高和宽。这样也是可以居中的。如果用jquery这个框架,那么代码就更简单了。
转载请指明出处。

Javascript 相关文章推荐
对字符串进行HTML编码和解码的JavaScript函数
Feb 01 Javascript
flexigrid 类似ext grid的JS表格代码
Jul 17 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
jQuery实现大转盘抽奖活动仿QQ音乐代码分享
Aug 21 Javascript
javascript闭包(Closure)用法实例简析
Nov 30 Javascript
jQuery基于排序功能实现上移、下移的方法
Nov 26 Javascript
jQuery实现模拟flash头像裁切上传功能示例
Dec 11 Javascript
AngularJS实现页面跳转后自动弹出对话框实例代码
Aug 02 Javascript
javascript 缓冲运动框架的实现
Sep 29 Javascript
使用layer.msg 时间设置不起作用的解决方法
Sep 12 Javascript
js实现简单五子棋游戏
May 28 Javascript
Vue性能优化的方法
Jul 30 Javascript
jquery入门必备的基本认识及实例(整理)
Jun 24 #Javascript
jquery必须知道的一些常用特效方法及使用示例(整理)
Jun 24 #Javascript
解析js如何获取当前url中的参数值并复制给input
Jun 23 #Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 #Javascript
JS localStorage实现本地缓存的方法
Jun 22 #Javascript
js获取某月的最后一天日期的简单实例
Jun 22 #Javascript
js遍历、动态的添加数据的小例子
Jun 22 #Javascript
You might like
PHP中JSON的应用技巧
2015/10/10 PHP
PHP中字符串长度的截取用法示例
2017/01/12 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
javascript String 对象
2008/04/25 Javascript
JQuery实现自定义对话框的代码
2008/06/15 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
利用jQuery接受和处理xml数据的代码(.net)
2011/03/28 Javascript
javascript权威指南 学习笔记之null和undefined
2011/09/25 Javascript
JQuery标签页效果实例详解
2015/12/24 Javascript
JS控制伪元素的方法汇总
2016/04/06 Javascript
Ajax验证用户名或昵称是否已被注册
2017/04/05 Javascript
微信小程序 本地数据存储实例详解
2017/04/13 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
微信小程序之圆形进度条实现思路
2018/02/22 Javascript
vue 刷新之后 嵌套路由不变 重新渲染页面的方法
2018/09/13 Javascript
JQuery 实现文件下载的常用方法分析
2019/10/29 jQuery
javascript数组元素删除方法delete和splice解析
2019/12/09 Javascript
[03:33]TI9战队采访 - Infamous
2019/08/20 DOTA
Python中lambda的用法及其与def的区别解析
2014/07/28 Python
Python Sqlite3以字典形式返回查询结果的实现方法
2016/10/03 Python
Python中str.join()简单用法示例
2018/03/20 Python
关于python列表增加元素的三种操作方法
2018/08/22 Python
实例分析python3实现并发访问水平切分表
2018/09/29 Python
详解python爬虫系列之初识爬虫
2019/04/06 Python
如何基于Python实现电子邮件的发送
2019/12/16 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
python实现经纬度采样的示例代码
2020/12/10 Python
巴西备受欢迎的服装和生活方式品牌:FARM Rio
2020/02/04 全球购物
罗技英国官方网站:Logitech UK
2020/11/03 全球购物
韩国乐天网上商城:Lotte iMall
2021/02/03 全球购物
应届毕业生求职信
2013/11/30 职场文书
物流管理专业毕业生求职信
2014/03/23 职场文书
总经理人事任命书
2014/06/05 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
《刷子李》教学反思
2016/02/20 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python