编程 Javascript

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

Posted in Javascript onMarch 10, 2011

<!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>

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

js 模拟实现类似c#下的hashtable的简单功能代码

Jan 24 Javascript

使用SyntaxHighlighter实现HTML高亮显示代码的方法

Feb 04 Javascript

javascript中parseInt()函数的定义和用法分析

Dec 20 Javascript

Node.js本地文件操作之文件拷贝与目录遍历的方法

Feb 16 Javascript

jQuery仿京东商城楼梯式导航定位菜单

Jul 25 Javascript

JavaScript中this的四个绑定规则总结

Sep 26 Javascript

解析JavaScript模仿块级作用域

Dec 29 Javascript

JavaScript实现跟随滚动缓冲运动广告框

Jul 15 Javascript

几个你不知道的技巧助你写出更优雅的vue.js代码

Jun 11 Javascript

JS实现可针对算术表达式求值的计算器功能示例

Sep 04 Javascript

微信小程序报错: thirdScriptError的错误问题

Jun 19 Javascript

小程序实现上传视频功能

Aug 18 Javascript

始终在屏幕中间显示Div的代码(css+js)

Mar 10 #Javascript

javascript的函数、创建对象、封装、属性和方法、继承

Mar 10 #Javascript

在jQuery 1.5中使用deferred对象的代码(翻译)

Mar 10 #Javascript

基于Jquery的跨域传输数据(JSONP)

Mar 10 #Javascript

jQuery.autocomplete 支持中文输入(firefox)修正方法

Mar 10 #Javascript

Jquery中getJSON在asp.net中的使用说明

Mar 10 #Javascript

JQuery中的$.getJSON 使用说明

Mar 10 #Javascript

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

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