- 浏览: 1595070 次
- 性别:
文章分类
- 全部博客 (2929)
- 非技术 (18)
- Eclipse (11)
- JAVA (31)
- 正则表达式 (0)
- J2EE (4)
- DOS命令 (2)
- WEB前端 (52)
- JavaScript (69)
- 数据库 (8)
- 设计模式 (0)
- JFreechart (1)
- 操作系统 (1)
- 互联网 (10)
- EasyMock (1)
- jQuery (5)
- Struts2 (12)
- Spring (24)
- 浏览器 (16)
- OGNL (1)
- WebService (12)
- OSGi (14)
- 软件 (10)
- Tomcat (2)
- Ext (3)
- SiteMesh (2)
- 开源软件 (2)
- Hibernate (2)
- Quartz (6)
- iBatis (2)
最新评论
<!-- NEWSZW_HZH_BEGIN-->
首先再次详细解释一下JS中窗口和网页的几种尺寸属性的含义
document.body.clientWidth(网页可见区域宽):是指浏览器显示网页的区域宽度,不包括浏览器的边框宽度和垂直滚动条的宽度。大小随着浏览器的窗口大小而改变。
document.body.clientHeight(网页可见区域高):是指浏览器显示网页的区域所能看到的高度,不包括浏览器的边框宽度和水平滚动条的高度。大小随着浏览器的窗口大小而改变。
document.body.scrollTop(网页被卷去的高):是指拉动垂直滚动条时网页上面被地址栏及菜单栏遮盖着的部分的高。
document.body.scrollLeft(网页被卷去的左):是指拉动水平滚动条时网页左面被左边线遮盖着的部分的宽。
现在我们来分析一下程序该如何实现:
第一步我们要实现的是使层在弹出时绝对居中不去考虑是否有滚动条的情况。
1.计算出层距离显示区域左边和上边的位置
注意:divId指的是所要居中的层,divId.clientWidth为其宽度!@
var divId = document.getElementById("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;
这样显示出来就是居中的了。
完整代码如下:
[Ctrl+A 全选 提示:你可先修改部分代码,再按运行]
如
果你想在拖动滚动条或是窗口重置大小时,层也能居中显示的话,可以在body的属性里面加上onresize="divcenter();"和
onscroll="divcenter();"就OK了,不过可能显示的效果不是很好,特别是在拖动滚动条时的效果可能是一擅一擅的,忒不爽。
发表评论
-
Javascript评估用户输入密码的强度的方法 代码
2009-07-28 17:50 674用Javascript评估用户输入密码的强度密码已经是我们生活 ... -
图片和文字放一起,不能居中的解决方法
2009-07-29 14:47 917<td align="center" ... -
解开JavaScript生命的达芬奇密码
2009-08-05 17:56 710解开JavaScript生命的达芬奇密码 ——如何使用Jav ... -
掌控上传进度的AJAX Upload(转贴)
2009-08-05 17:59 685掌控上传进度的AJAX Uploa ... -
Javascript跨域访问解决方案
2009-08-11 20:11 616由于安全方面的考虑,Javascript被限制了跨域访问的能力 ... -
不唐突的JavaScript的七条准则(转载)
2009-08-12 13:18 607经过多年的开发、教学 ... -
浅谈Javascript中的事件流和事件绑定
2009-08-13 16:31 754事件流 浏览器中的事 ... -
JavaScript继承详解(二)
2009-08-17 17:04 594转自:http://www.cnblogs.com/sansh ... -
JavaScript继承详解(一)
2009-08-17 17:04 668转自:http://www.cnblogs.com/sansh ... -
javascript实用技巧--数组.
2009-08-17 17:08 632数组和字符串类型对象的方法我特容易搞混淆,所以把他列出来,免得 ... -
IE和Firefox之间的JavaScript差异
2009-08-17 17:18 561尽管 JavaScript 历史上使用冗长而令人生厌的代码块来 ... -
常见的JavaScript错误
2009-08-17 17:19 709作者: Richardy, 出处:IT ... -
JS获取浏览器窗口大小 获取屏幕,浏览器,网页高度宽度
2009-08-17 17:19 631网页可见区域宽:document.body.clientWid ... -
Javascript的Defer属性
2009-08-17 17:48 672Script中的Defer属性 ... -
最佳的"addEvent"是怎样诞生的
2009-08-18 13:47 616IE的 JScript 存在内存泄露的bug 想必大家都清楚或 ... -
值得推荐的事件捕获函数AddEvent()
2009-08-18 13:56 7391, 下面是JQuery之父推荐的添加移除事件方法。 ... -
随滚动条移动的层
2009-08-20 15:55 704<!DOCTYPE html PUBLIC &qu ... -
javascript 获取滚动条高度
2009-08-20 16:02 760/******************** * 取窗口滚动 ... -
如何去掉ie里面的关闭按钮,和屏蔽ALT+F4 (转载)
2009-09-01 17:46 757去掉关闭按钮可以使用无边框窗口设计,不过IE6中已经不支持了。 ... -
(window.onunload)只有点击浏览器右上角关闭按钮才执行
2009-09-01 18:31 828<html> <head> &l ...
相关推荐
js+CSS实现弹出居中背景半透明div层的方法.docx
Jquery弹出div层窗口以及div屏幕居中, 背景滤镜效果, div拖拽效果 在IE和FireFox测试通过!
介绍了Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法,有需要的朋友可以参考一下
JavaScript+div 半透明弹出层,function openNewDiv(_id) { var m = "mask"; if (docEle(_id)) document.removeChild(docEle(_id)); if (docEle(m)) document.removeChild(docEle(m)); // 新激活图层 var newDiv...
主要介绍了js+CSS实现弹出居中背景半透明div层的方法,涉及javascript操作弹出div层的操作技巧,非常具有实用价值,需要的朋友可以参考下
JS如何实现在弹出窗口中加载页面 弹出窗口,加载页面。弹出窗口初始位置为居中。可在关闭窗口时,回调主页面按钮。要求jquery。 效果演示 主要代码(时间仓促,没加注释,不过代码很简单,就是创建几个元素拼在...
JQuery弹出层插件 PopupDiv-v1.0 通用自定义弹出层插件 by maxcoold 2009-2-29 bug 提交至:maxcoold@126.com --------------------------------------------- 功能说明: 本插件基于jquery 1.31下编写,请尽量在...
如:我想要<div id="ok">这里是弹出浮动遮罩层</div> 并随页面滚动而滚动 只要调用 $('#ok').showModel();这个方法就可以了 调用$('#ok').closeModel();就可以关闭层了 这个插件还有个好处是自动隐藏select控件,...
代码如下: <!DOCTYPE html> <html lang=”en” xmlns=”http://www.w3.org/1999/xhtml”> <head> <meta charset=”utf-8″ /> <title></title> <style type=”text/css”> ....
4.jQuery超炫淡入淡出效果DIV渐变居中弹出框插件下载 5.jquery黑色+蓝色风格DIV提示框示例 6.一款jQuery+DIV居中淡入淡出信息提示框示例 7.一款jQuery可拖动提示窗插件(对话框Dialog插件) 8.一款基于jQuery...
首先我的弹窗div在弹出的时候是默认在页面正中的,但是要使用这个插件被拖动的div就要使 用”position:absolute”的属性定位,这让我们的居中非常困难。解决思路:在触发弹窗之前用js获取当前屏 幕的分辨率然后将...
jquery弹出层当鼠标点击文字或图片弹出层,弹出层浮动在屏幕上可以随浏览器上下滚动,弹出层可自动居中在页面中间
在一些页面中,我们总会遇到一些弹窗不居中的时候,还要根据浏览器的大小来调整弹窗的弹出位置, 之前我也遇到这样的问题,现在我把我知道的呈现给大家 css样式 .windowBox{ width:500px; } .mid-tanBox{ ...
3. 对于弹出层,各位针对自己的情况设置z-index,这里我没有设置了 4. IE6没有测试,抱歉= = DOM结构 复制代码代码如下: <html> <head> <link rel=”stylesheet” type=”text/css” href=”style...
浮动层居中的对话框效果演示 浮动层居中的对话框效果演示 HTML { HEIGHT: 100% } BODY { HEIGHT: 100% } BODY { FONT-SIZE: 14px; FONT-FAMILY: Tahoma, Verdana, sans-serif } DIV.neat-dialog-cont { Z-INDEX: ...
弹出窗口初始位置为居中。可在关闭窗口时,回调主页面按钮。要求jquery。 效果演示 首先,演示主窗口两个按钮作用。然后,演示关闭弹出窗口时,调用主窗口的两个按钮。 主要代码(时间仓促,没加注释,不过代码很...
弹出有半透明遮罩的div层,可拖动。弹出层在窗口自适应居中,简单用div和li模拟下select的效果。