始終在屏幕中間顯示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 文件 通過元素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 文件 通過元素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)文章
Javascript實(shí)用方法之json合并的場(chǎng)景分析
這篇文章主要介紹了Javascript實(shí)用方法之json合并,jQuery 的“extend()”方法有兩個(gè)原型：合并的方法,分別是淺合并和深度合并，本文通過代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2022-09-09
Javascript 函數(shù)中的參數(shù)使用分析
關(guān)于JS中的函數(shù)，相信大家已經(jīng)很了解了，其中有些特性呢，感覺還是值得提一提的，下面就說說JS中的函數(shù)吧。2010-03-03
JavaScript中對(duì)象property的刪除方法介紹
這篇文章主要介紹了JavaScript中對(duì)象property的刪除方法介紹,本文主要是對(duì)delete操作符的介紹,需要的朋友可以參考下2014-12-12
用js實(shí)現(xiàn)調(diào)用flash，去除虛邊框效果代碼2008-04-04
通用的javascript 換行色換列色的小js...2007-04-04
微信小程序如何使用Promise對(duì)wx.request()封裝詳解(附完整代碼)
微信小程序的wx.request是微信小程序最早生成的數(shù)據(jù)庫傳輸模式,數(shù)據(jù)傳輸簡(jiǎn)單明確,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何使用Promise對(duì)wx.request()封裝的相關(guān)資料,需要的朋友可以參考下2023-03-03
微信小程序?qū)崿F(xiàn)自動(dòng)回復(fù)圖片消息
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)客服消息自動(dòng)回復(fù)圖片消息，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)吧2023-01-01
這篇文章主要介紹了詳解webpack es6 to es5支持配置 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-05-05
js原生之焦點(diǎn)圖轉(zhuǎn)換加定時(shí)器實(shí)例
本文主要分享了在jQuery之焦點(diǎn)圖轉(zhuǎn)換-左右的基礎(chǔ)上，將jQuery代碼改成js原生，并添加定時(shí)器（setInterval()和clearInterval()）的實(shí)例代碼。需要的朋友可以參考借鑒2016-12-12
下面小編就為大家?guī)硪黄猨s中使用使用原型(prototype)定義方法的好處詳解。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2016-07-07