当前位置：首页 > 资讯 > 技术文档

始终在屏幕中间显示Div的代码(css+js)

时间：2022-12-27 10:28 编辑：来源：阅读：
扫一扫，手机访问

摘要：始终在屏幕中间显示Div的代码(css+js)

[b]一、在中间显示;(参考：[url=http://www.1sucai.cn/article/26525.htm]sky100articles1790515)[/url] [/b]

.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); }

[u]复制代码[/u] 代码如下:

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);
}

[b]二、始终在中间显示，滚动时，在Js中增加以下代码： [/b]

[u]复制代码[/u] 代码如下:

function scall() {
sc1("DivMain");
}
window.onscroll = scall;
window.onresize = scall;
window.onload = scall;

全部评论(0)

上一篇：javascript 操作符（~、&、|、^、<<、>>）使用案例
下一篇：js获取url参数代码实例分享(JS操作URL)

资讯排行榜
更多>>