使DIV始终居于屏幕中间的方法——同城生活贴吧——123发布网|123同城网|123同城信息网|免费发布信息|123招聘|123交友|123房产

登录123 | 账号: 密码: 商铺贴吧

今天是：


供应求购	免费商铺	商业资讯	库存二手	黄页大全		生活贴吧	房屋租售	招聘求职	婚恋交友	自助广告

使DIV始终居于屏幕中间的方法

发布时间：2010/11/18 8:20:41 发布人：网络游民点击：187

使DIV始终居于屏幕中间的方法
方法1：

< !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>随滚动条移动的层 - 飘逸online-http://www.ie521.com < /TITLE>
< META HTTP-EQUIV="Content-Type" CONTENT="text/html" charset="gb2312">
< META NAME="Author" CONTENT="haiwa">
< META NAME="homepage" CONTENT="www.51windows.net">
< /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>

方法2：

< !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"; lang="gb2312">
< head>
< meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
< meta http-equiv="Content-Language" content="zh-cn" />
< meta content="all" name="robots" />
< meta name="Author" content="huobazi@aspxboy.com ,銧" />
< meta name="Copyright" content="www.AspxBoy.Com,;貶,籏." />
< meta name="Description" content="www.AspxBoy.Com" />
< meta name="Keywords" content="www.AspxBoy.Com,;銧,huobazi" />
< title> New New Document< /title>

< /head>

< body>
< iframe frameborder="0" src="about:blank"

style="border:0px;position:absolute;z-index:9;left:0px;top:0px;width:expression(this.offsetParent.scrollWidth);height:expression(this.offsetParent.scrollHeight);filter:progid:DXImageTransform.Microsoft.Alpha(Opacity=75, FinishOpacity=0, Style=0, StartX=0, FinishX=100, StartY=0, FinishY=100);">< /iframe>

< div style="position:absolute;z-index:10;left:expression((this.offsetParent.clientWidth/2)-(this.clientWidth/2)+this.offsetParent.scrollLeft);top:expression((this.offsetParent.clientHeight/2)-(this.clientHeight/2)+this.offsetParent.scrollTop);">Please Wait...< br />< img src="/_images/statusbar.gif" />< /div>
< /body>

< /html>

方法三：
< div id="divObjection" style="display:none; z-index: 100; left: 25%; right:25%; position: absolute; text-align: center; width: 50%; height: 120px; border-right: #009900 1px solid; border-top: #009900 1px solid; border-left: #009900 1px solid; border-bottom: #009900 1px solid; background-color: #f9fff6;">< /div>
关键点：left+right+width =100%

回复此帖

※

发布回复

↓请遵循123发布网同城生活贴吧/论坛发帖规则；↓寻一夜情、包养、招嫖类信息的一律全部删除，并报公安备案↓

回复标题：
回复内容：
上传图片：
验证码：