js+css使DIV始終居于屏幕中間 左下 左上 右上 右下的代碼集合
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns=" http://www.w3.org/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns=" http://www.w3.org/1999/xhtml">
<HEAD>
<TITLE>隨滾動(dòng)條移動(dòng)的層 </TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
</HEAD>
<style>
<!--
.div{
position: absolute;
border: 2px solid red;
background-color: #EFEFEF;
line-height:90px;
font-size:12px;
z-index:1000;
}
-->
</style>
<BODY>
<div id="Javascript.Div1" class="div" style="width: 240px; height:90px" align="center">正中...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc1(){
document.getElementById("Javascript.Div1").style.top=(document.documentElement.scrollTop+(document.documentElement.clientHeight-document.getElementById("Javascript.Div1").offsetHeight)/2)+"px";
document.getElementById("Javascript.Div1").style.left=(document.documentElement.scrollLeft+(document.documentElement.clientWidth-document.getElementById("Javascript.Div1").offsetWidth)/2)+"px";
}
</SCRIPT>
<div id="Javascript.Div2" class="div" style="width: 240px; height:90px" align="center">左上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc2(){
document.getElementById("Javascript.Div2").style.top=(document.documentElement.scrollTop)+"px";
document.getElementById("Javascript.Div2").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>
<div id="Javascript.Div3" class="div" style="width: 240px; height:90px" align="center">左下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc3(){
document.getElementById("Javascript.Div3").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div3").offsetHeight)+"px";
document.getElementById("Javascript.Div3").style.left=(document.documentElement.scrollLeft)+"px";
}
</SCRIPT>
<div id="Javascript.Div4" class="div" style="width: 240px; height:90px" align="center">右上...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc4(){
document.getElementById("Javascript.Div4").style.top=(document.documentElement.scrollTop)+"px";
document.getElementById("Javascript.Div4").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div4").offsetWidth)+"px";
}
</SCRIPT>
<div id="Javascript.Div5" class="div" style="width: 240px; height:90px" align="center">右下...</div>
<SCRIPT LANGUAGE="JavaScript">
function sc5(){
document.getElementById("Javascript.Div5").style.top=(document.documentElement.scrollTop+document.documentElement.clientHeight-document.getElementById("Javascript.Div5").offsetHeight)+"px";
document.getElementById("Javascript.Div5").style.left=(document.documentElement.scrollLeft+document.documentElement.clientWidth-document.getElementById("Javascript.Div5").offsetWidth)+"px";
}
</SCRIPT>
<SCRIPT LANGUAGE="JavaScript">
<!--
function scall(){
sc1();sc2();sc3();sc4();sc5();
}
window.onscroll=scall;
window.onresize=scall;
window.onload=scall;
//-->
</SCRIPT>
<div style="position: absolute; top: 0px; left: 0px; width: 10000px; height: 4000px;"></div>
</BODY>
</HTML>
相關(guān)文章
JavaScript類型檢測(cè)之typeof 和 instanceof 的缺陷與優(yōu)化
在javascript中,typeof 和 instanceof 是用來(lái)判斷數(shù)據(jù)類型比較通用的兩個(gè)方法,這篇文章的目的是通過(guò)對(duì)這兩個(gè)方法介紹來(lái)分析其存在的不足并提出優(yōu)化方案2016-01-01微信小程序商城項(xiàng)目之購(gòu)物數(shù)量加減(3)
這篇文章主要為大家詳細(xì)介紹了微信小程序商城購(gòu)物數(shù)量加減功能,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-04-04JS獲取子窗口中返回的數(shù)據(jù)實(shí)現(xiàn)方法
下面小編就為大家?guī)?lái)一篇JS獲取子窗口中返回的數(shù)據(jù)實(shí)現(xiàn)方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-05-05基于JS實(shí)現(xiàn)移動(dòng)端訪問(wèn)PC端頁(yè)面時(shí)跳轉(zhuǎn)到對(duì)應(yīng)的移動(dòng)端網(wǎng)頁(yè)
不想通過(guò)CSS自適應(yīng)在PC端和移動(dòng)端分別顯示不同的樣式,那么只能通過(guò)在移動(dòng)端訪問(wèn)PC端網(wǎng)頁(yè)時(shí)跳轉(zhuǎn)到對(duì)應(yīng)的移動(dòng)端網(wǎng)頁(yè)了,那么怎么跳轉(zhuǎn)呢,網(wǎng)上也有很多文章說(shuō)明,以下實(shí)現(xiàn)思路經(jīng)過(guò)小編測(cè)試過(guò),需要的朋友可以參考下2016-04-04JavaScript 進(jìn)度條實(shí)現(xiàn)代碼(Firefox等相似瀏覽器下不支持)
JavaScript實(shí)現(xiàn)的進(jìn)度條,可惜在Firefox等相似瀏覽器下不支持(遠(yuǎn)程)2009-07-07JavaScript的模塊化:封裝(閉包),繼承(原型) 介紹
在復(fù)雜的邏輯下, JavaScript 需要被模塊化,模塊需要封裝起來(lái),只留下供外界調(diào)用的接口。閉包是 JavaScript 中實(shí)現(xiàn)模塊封裝的關(guān)鍵,也是很多初學(xué)者難以理解的要點(diǎn)2013-07-07小程序兼容安卓和IOS數(shù)據(jù)處理問(wèn)題及坑
這篇文章主要介紹了小程序兼容安卓和IOS數(shù)據(jù)處理問(wèn)題及坑,小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-09-09BootStrap中Datepicker控件帶中文的js文件
bootstrap-datepicker 是一個(gè)非常優(yōu)秀的時(shí)間選擇插件。這篇文章主要介紹了bootstrap-datepicker帶中文的js文件的相關(guān)資料,需要的朋友可以參考下2016-08-08