js控制使div自动适应居中
一直都在想怎么样使弹出的DIV能在任何时候都是居中显示的,刚开始的时候是用CSS样式直接定义好层的位置,但是当页面很长的时候,或是浏览器窗口大小不是固定的时候就不能正确的显示,所以只好用JS来控制DIV的显示位置。
首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义:
document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。
document.body.clientHeight(网页可见区域高):是指浏览器显示网页的区域所能看到的高度,不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。
document.body.scrollTop(网页被卷去的高):是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。
document.body.scrollLeft(网页被卷去的左):是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。
现在我们来分析一下程序该如何实现:
第一步我们要实现的是使层在弹出时绝对居中不去考虑是否有滚动条的情况。
1.计算出层距离显示区域左边和上边的位置
注意:divId指的是所要居中的层,divId.clientWidth为其宽度!@
var divId = document.getElementByIdx("xxx");
var v_left=(document.body.clientWidth-divId.clientWidth)/2;
var v_top=(document.body.clientHeight-divId.clientHeight)/2;
2.把得到的值重新赋给DIV的left和top属性
divId.style.left=v_left;
divId.style.top=v_top;
说明:divId为DIV标签的id值
这样这个层就是居中显示的了。
第二步我们要实现的是使在拖动滚动条的情况下弹出的层也能居中。
其实很简单我们只要把拖动的宽度和高度加到前面计算出来的左边距和上边距中就OK 了。
v_left+=document.body.scrollLeft;
v_top+=document.body.scrollTop;
2.把得到的值重新赋给DIV的left和top属性
divId.style.left=v_left;
divId.style.top=v_top;
这样显示出来就是居中的了。 fat注:那个document。body其实可以一般化?
js控制使div自动适应居中的更多相关文章
- js控制固定div和随屏滚动div兼容多浏览器和纯css控制(来自网络)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js控制某个div在页面加载完成5秒后隐藏
<div id="k">测试</div><script>setTimeout("document.getElementById('k' ...
- js控制iframe高度自动撑开
<iframe src="index.html" width="100%" name="" id="myiframe&quo ...
- JS控制滚动条的位置
转载▼http://blog.sina.com.cn/s/blog_4481a3460100rwwu.html JS控制滚动条的位置:window.scrollTo(x,y); 竖向滚动条置顶 ...
- js控制div滚动条,滚动滚动条使div中的元素可见并居中
1.html代码如下 <div id="panel"> <div id="div1"></div> <div id=& ...
- js控制 固定框架内图片 按比例显示 以及 占满框架 居中显示
js控制 固定框架内图片 等比例显示 以及 占满框架 纵横居中显示 通过设置 js函数 fitDiv里面var fit的值就好 function fitDiv (obj) { var target_w ...
- 使用div模拟textarea,实现文本输入框高度自适应(附:js控制textarea实现文本输入框高度自适应)
一.使用textarea标签进行多行文本的输入有很多限制,比如不能实现高度自适应,会出现难看的滚动条等问题. HTML5中添加了一个新属性contenteditable,该属性可以让input,tex ...
- js 控制Div循环显示 非插件版
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js 控制展开折叠 div html dom
js 控制展开折叠 div html dom <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" ...
随机推荐
- shell中条件判断if中的-z到-d
shell中条件判断if中的-z到-d的意思 2011-09-05 10:30 [ -a FILE ] 如果 FILE 存在则为真. [ -b FILE ] 如果 FILE 存在且是一个块特殊文件则为 ...
- 5天不再惧怕多线程——第一天 尝试Thread
随笔 - 218 文章 - 1 评论 - 3819 5天不再惧怕多线程——第一天 尝试Thread 原本准备在mongodb之后写一个lucene.net系列,不过这几天用到多线程时才发现自己 ...
- Codeforces Round #394 (Div. 2) D. Dasha and Very Difficult Problem
D. Dasha and Very Difficult Problem time limit per test:2 seconds memory limit per test:256 megabyte ...
- L144
Puny Dwarf Planet, Named 'Goblin,' Found Far Beyond PlutoA scrawny dwarf planet nicknamed "the ...
- SpringMVC札集(01)——SpringMVC入门完整详细示例(上)
自定义View系列教程00–推翻自己和过往,重学自定义View 自定义View系列教程01–常用工具介绍 自定义View系列教程02–onMeasure源码详尽分析 自定义View系列教程03–onL ...
- Django 碎片集合
命令行创建Django项目 熟记建立django命令:django-admin startproject xx (start project) 目录介绍 manage.py 文件是用来管理文件 ...
- linux 权限之所有者所属组
linux 如何改变文件属性与权限 我们知道档案权限对于一个系统的安全重要性,也知道档案的权限对于使用者与群组的相关性, 那如何修改一个档案的属性与权限呢? 我们这里介绍几个常用于群组.拥有者.各种身 ...
- python学习之控制语句
#if statement number=int(input("please input a number")); if number<10 : print("is ...
- 【面试季之三】IE6兼容问题
最近面试真的碰到很多基础的问题,平时在工作的时候往往可以直观的看到页面的问题,然后进行代码调试,调试不明白了还可以上网查一下.可是面试的时候,就是得当场反应出来,并且还得能系统的说出1.2.3.4.5 ...
- linux之使用samba实现文件共享
早期网络想要在不同主机之间共享文件大多要用FTP协议来传输,但FTP协议仅能做到传输文件却不能直接修改对方主机的资料数据,这样确实不太方便,于是便出现了NFS开源文件共享程序,NFS是一个能够将多台L ...