始終在屏幕中間顯示Div的代碼(css+js)
更新時(shí)間：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
調(diào)用：<input type="button" id="Button1" onclick="sc1(‘DivMain')" />
// JScript 文件 通過(guò)元素id得到對(duì)象的函數(shù)
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);
}
二、始終在中間顯示，滾動(dòng)時(shí)，在Js中增加以下代碼：
function scall() {
sc1("DivMain");
}
window.onscroll = scall;
window.onresize = scall;
window.onload = scall;
復(fù)制代碼 代碼如下:
.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
調(diào)用：<input type="button" id="Button1" onclick="sc1(‘DivMain')" />
// JScript 文件 通過(guò)元素id得到對(duì)象的函數(shù)
function $(id)
{
return document.getElementById(id);
}
復(fù)制代碼 代碼如下:
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);
}
二、始終在中間顯示，滾動(dòng)時(shí)，在Js中增加以下代碼：
復(fù)制代碼 代碼如下:
function scall() {
sc1("DivMain");
}
window.onscroll = scall;
window.onresize = scall;
window.onload = scall;
您可能感興趣的文章:
相關(guān)文章
下面小編就為大家?guī)?lái)一篇form表單轉(zhuǎn)Json提交的方法(推薦)。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-09-09
本文主要介紹了JS原生雙欄穿梭選擇框的實(shí)現(xiàn)示例，文中通過(guò)示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
Javascript 變量作用域 兩個(gè)可能會(huì)被忽略的小特性
關(guān)于Javascript，大家肯定都很熟悉啦，對(duì)于有編程經(jīng)驗(yàn)的朋友來(lái)說(shuō)，Javascript很快就能上手，不過(guò)關(guān)于JS的變量作用域，還是有一點(diǎn)差別的。2010-03-03
這篇文章主要向大家分享如何在fckeditor編輯器插入代碼操作，這里腳本之家小編就為大家分享一下啊2007-05-05
這篇文章主要介紹了JS模擬Dialog彈出浮動(dòng)框效果代碼,涉及JavaScript可拖動(dòng)窗口的創(chuàng)建及布局相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-10-10
這篇文章主要介紹了JavaScript多種頁(yè)面刷新方法小結(jié)，非常不錯(cuò)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
javascript 判斷字符串是否包含某字符串及indexOf使用示例
js javascript 判斷字符串是否包含某字符串,String對(duì)象中查找子字符及indexOf具體使用，感興趣的朋友可以參考下2013-10-10
Ajax::prototype 源碼解讀...2007-01-01
JS獲取鍵盤按鍵的鍵碼event.keyCode，記錄-方便查找。需要的朋友參考下本教程吧2017-01-01
兼容最新firefox、chrome和IE的javascript圖片預(yù)覽實(shí)現(xiàn)代碼
這篇文章主要介紹了兼容最新firefox、chrome和IE的javascript圖片預(yù)覽實(shí)現(xiàn)代碼,測(cè)試了瀏覽器firefox6、firefox12、chrome 25.0.1364.172 m、IE6-IE10 都兼容,需要的朋友可以參考下2014-08-08