始终在屏幕中间显示Div的代码(css+js)
更新时间：2011年03月10日 23:34:39 作者：
如何始终在屏幕中间显示Div需要的朋友可以参考下。
一、在中间显示;(参考：sky100articles1790515)
.ordersearchDivCss
{
position: absolute;
z-index: 100;
display: block;
background-color: #6ec1df;
}
<div class="ordersearchDivCss" id="DivMain" style="width: 400px; height:200px" align="center"></div>
Js code
调用：<input type="button" id="Button1" onclick="sc1(‘DivMain')" />
// JScript 文件 通过元素id得到对象的函数
function $(id)
{
return document.getElementById(id);
}
function sc1(DivId) {
var Div = $(DivId);
$(DivId).style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - $(DivId).offsetHeight) / 2) + "px";
$(DivId).style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - $(DivId).offsetWidth) / 2) + "px";
//alert($(DivId).style.top);
}
二、始终在中间显示，滚动时，在Js中增加以下代码：
function scall() {
sc1("DivMain");
}
window.onscroll = scall;
window.onresize = scall;
window.onload = scall;
复制代码 代码如下:
.ordersearchDivCss
{
position: absolute;
z-index: 100;
display: block;
background-color: #6ec1df;
}
<div class="ordersearchDivCss" id="DivMain" style="width: 400px; height:200px" align="center"></div>
Js code
调用：<input type="button" id="Button1" onclick="sc1(‘DivMain')" />
// JScript 文件 通过元素id得到对象的函数
function $(id)
{
return document.getElementById(id);
}
复制代码 代码如下:
function sc1(DivId) {
var Div = $(DivId);
$(DivId).style.top = (document.documentElement.scrollTop + (document.documentElement.clientHeight - $(DivId).offsetHeight) / 2) + "px";
$(DivId).style.left = (document.documentElement.scrollLeft + (document.documentElement.clientWidth - $(DivId).offsetWidth) / 2) + "px";
//alert($(DivId).style.top);
}
二、始终在中间显示，滚动时，在Js中增加以下代码：
复制代码 代码如下:
function scall() {
sc1("DivMain");
}
window.onscroll = scall;
window.onresize = scall;
window.onload = scall;
您可能感兴趣的文章:
相关文章
下面小编就为大家带来一篇form表单转Json提交的方法(推荐)。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-09-09
本文主要介绍了JS原生双栏穿梭选择框的实现示例，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
关于Javascript，大家肯定都很熟悉啦，对于有编程经验的朋友来说，Javascript很快就能上手，不过关于JS的变量作用域，还是有一点差别的。2010-03-03
这篇文章主要向大家分享如何在fckeditor编辑器插入代码操作，这里脚本之家小编就为大家分享一下啊2007-05-05
这篇文章主要介绍了JS模拟Dialog弹出浮动框效果代码,涉及JavaScript可拖动窗口的创建及布局相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-10-10
这篇文章主要介绍了JavaScript多种页面刷新方法小结，非常不错，具有一定的参考借鉴价值,需要的朋友可以参考下2019-04-04
javascript 判断字符串是否包含某字符串及indexOf使用示例
js javascript 判断字符串是否包含某字符串,String对象中查找子字符及indexOf具体使用，感兴趣的朋友可以参考下2013-10-10
Ajax::prototype 源码解读...2007-01-01
JS获取键盘按键的键码event.keyCode，记录-方便查找。需要的朋友参考下本教程吧2017-01-01
兼容最新firefox、chrome和IE的javascript图片预览实现代码
这篇文章主要介绍了兼容最新firefox、chrome和IE的javascript图片预览实现代码,测试了浏览器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以参考下2014-08-08
最新评论