js+css使DIV始终居于屏幕中间左下左上右上右下的代码集合

原水小子

浏览: 233942 次
性别:
来自: 济南

最近访客更多访客>>

春隆隆

小白白白

空空大师111

why981229

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

HTML
JS

html javascript

<!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>随滚动条移动的层 </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>

notice: I was copied from here:http://www.jb51.net/article/26525.htm

Thanks

分享到：

关于clientHeight、offsetHeight、scrollHe ... | Jquery实现自动提示下拉框

2013-04-13 22:12
浏览 1468
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js+css使DIV始终居于屏幕中间左下左上右上右下的代码集合

评论

发表评论

相关推荐

最近访客 更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论

js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合

评论

发表评论

相关推荐

让页面滑动流畅得飞起来的新特性：Passive Event Listeners

求多个数组的每一项互相拼接（多个产品属性组合）

js伪数组元素转成数组的方法详解

html元素永远点不到···

html5计算器html5Calculator.html

详解IE11/chrome/firefox浏览器下Navigator各属性

js跨域调http接口（jsonp）

HTML可拖拽模拟对话框

判断电脑是否联网

DOM元素 onScrollToBottom监听示例

HTML5 FileReader用法：图片预览、文本文件预览等

HTML5滤镜效果demo

纯JS为DOM添加html字符串：appendHTML方法和prependHTML方法

IE6/IE7/IE8下float:right显示异常的解决方法

实用的 Javascript 技巧

js querySelector和getElementById通过id获取元素的区别

JS判断浏览器类型与版本

js onkeypress与onkeydown 事件区别详细说明

jquery的data()方法与html5中DOM标签的dataset属性异同

判断JS对象是不是数组

最近访客更多访客>>

js+css使DIV始终居于屏幕中间左下左上右上右下的代码集合