通过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 相关文章推荐
JS option location 页面跳转实现代码
Dec 27 Javascript
javascript笔记 String类replace函数的一些事
Sep 22 Javascript
jQuery学习笔记之控制页面实现代码
Feb 27 Javascript
javascript学习笔记(九) js对象 设计模式
Jun 19 Javascript
javascript实现Table排序的方法
May 15 Javascript
AngularJS 执行流程详细介绍
Aug 18 Javascript
超级简易的JS计算器实例讲解(实现加减乘除)
Aug 08 Javascript
详解利用Angular实现多团队模块化SPA开发框架
Nov 27 Javascript
vue init失败简单解决方法(终极版)
Dec 22 Javascript
利用React Router4实现的服务端直出渲染(SSR)
Jan 07 Javascript
Vue3.0数据响应式原理详解
Oct 09 Javascript
基于javascript的无缝滚动动画1
Aug 07 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的字符串用法小结
2010/06/08 PHP
wordpress自定义url参数实现路由功能的代码示例
2013/11/28 PHP
19个超实用的PHP代码片段
2014/03/14 PHP
jquery仿QQ商城带左右按钮控制焦点图片切换滚动效果
2013/06/27 Javascript
jquery实现仿新浪微博评论滚动效果
2015/08/06 Javascript
深入浅析Extjs中store分组功能的使用方法
2016/04/20 Javascript
详解jQuery简单的表格应用
2016/12/16 Javascript
Jil,高效的json序列化和反序列化库
2017/02/15 Javascript
canvas时钟效果
2017/02/16 Javascript
vue监听scroll的坑的解决方法
2017/09/07 Javascript
vue项目中axios使用详解
2018/02/07 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
手动下载Chrome并解决puppeteer无法使用问题
2018/11/12 Javascript
在webstorm开发微信小程序之使用阿里自定义字体图标的方法
2018/11/15 Javascript
函数式编程入门实践(一)
2019/04/20 Javascript
JS中作用域以及变量范围分析
2020/07/18 Javascript
基于JavaScript实现大文件上传后端代码实例
2020/08/18 Javascript
js实现滚动条自动滚动
2020/12/13 Javascript
[01:08:30]DOTA2-DPC中国联赛 正赛 Ehome vs Elephant BO3 第一场 2月28日
2021/03/11 DOTA
pyqt4教程之实现windows窗口小示例分享
2014/03/07 Python
Python深入学习之上下文管理器
2014/08/31 Python
Python过滤列表用法实例分析
2016/04/29 Python
Python使用pyodbc访问数据库操作方法详解
2018/07/05 Python
使用Python的turtle模块画国旗
2019/09/24 Python
python使用matplotlib绘制雷达图
2019/10/18 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
Python 常用日期处理 -- calendar 与 dateutil 模块的使用
2020/09/02 Python
使用Python绘制台风轨迹图的示例代码
2020/09/21 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
DVF官方网站:美国时装界尊尚品牌
2017/08/29 全球购物
Fnac西班牙官网:法国文化和电子产品零售商
2021/03/14 全球购物
家长对孩子评语
2014/01/30 职场文书
《鸿门宴》教学反思
2014/04/22 职场文书
2014企业领导班子四风对照检查材料思想汇报
2014/09/17 职场文书
个人师德师风自我剖析材料
2014/09/29 职场文书
幼儿园开学报名通知
2015/07/16 职场文书