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