通过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 相关文章推荐
SUN的《AJAX与J2EE》全文译了
Feb 23 Javascript
收集的网上用的ajax之chat.js文件
Apr 08 Javascript
初窥JQuery(二)事件机制(2)
Dec 06 Javascript
JQuery入门——事件切换之toggle()方法应用介绍
Feb 05 Javascript
JavaScript设计模式之单件模式介绍
Dec 28 Javascript
jQuery实现div随意拖动的实例代码(通用代码)
Jan 28 Javascript
基于javascript实现表格的简单操作
May 21 Javascript
JavaScript中数组Array.sort()排序方法详解
Mar 01 Javascript
小程序实现列表删除功能
Oct 30 Javascript
JavaScript之解构赋值的理解
Jan 30 Javascript
JavaScript之scrollTop、scrollHeight、offsetTop、offsetHeight等属性学习笔记
Jul 15 Javascript
wepy--用vantUI 实现上弹列表并选择相应的值操作
Nov 03 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实现与ASP Banner组件相似的类
2006/10/09 PHP
php中的strpos使用示例
2014/02/27 PHP
js常用排序实现代码
2010/12/28 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
JS实现5秒钟自动封锁div层的方法
2015/02/20 Javascript
jQuery团购倒计时特效实现方法
2015/05/07 Javascript
JS拖拽插件实现步骤
2015/08/03 Javascript
使用canvas实现仿新浪微博头像截取上传功能
2015/09/02 Javascript
JavaScript实现自动生成网页元素功能(按钮、文本等)
2015/11/21 Javascript
javascript如何写热点图
2015/12/08 Javascript
javascript每日必学之运算符
2016/02/16 Javascript
AngularJS轻松实现双击排序的功能
2016/08/30 Javascript
JS实现列表页面隔行变色效果
2017/03/25 Javascript
详解webpack 多入口配置
2017/06/16 Javascript
详解前端路由实现与react-router使用姿势
2017/08/07 Javascript
jQuery使用$.extend(true,object1, object2);实现深拷贝对象的方法分析
2019/03/06 jQuery
vue中使用极验验证码的方法(附demo)
2019/12/04 Javascript
JS实现音乐钢琴特效
2020/01/06 Javascript
vue实现前端分页完整代码
2020/06/17 Javascript
使用Vue-scroller页面input框不能触发滑动的问题及解决方法
2020/08/08 Javascript
微信小程序实现点击导航标签滚动定位到对应位置
2020/11/19 Javascript
[15:20]DOTA2-DPC中国联赛 正赛 Elephant vs Aster 选手采访
2021/03/11 DOTA
Python实现优先级队列结构的方法详解
2016/06/02 Python
机器学习10大经典算法详解
2017/12/07 Python
分析Python中解析构建数据知识
2018/01/20 Python
Python元组及文件核心对象类型详解
2018/02/11 Python
详解PyCharm配置Anaconda的艰难心路历程
2018/08/13 Python
python异步存储数据详解
2019/03/19 Python
详解如何使用Pytest进行自动化测试
2021/01/14 Python
优秀毕业生求职推荐信范文
2013/11/21 职场文书
餐饮服务员岗位职责
2015/02/09 职场文书
医生个人年度总结
2015/02/28 职场文书
2015年小学语文教学工作总结
2015/05/25 职场文书
2015年公司中秋节致辞
2015/07/31 职场文书
中学图书馆工作总结
2015/08/11 职场文书
启动Tomcat时出现大量乱码的解决方法
2021/06/21 Java/Android