编程 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取模（求余数）隔行变色

May 15 Javascript

Javascript window对象详解

Nov 12 Javascript

针对JavaScript中this指向的简单理解

Aug 26 Javascript

js 提交form表单和设置form表单请求路径的实现方法

Oct 25 Javascript

JavaScript数据类型的存储方法详解

Aug 25 Javascript

vue与bootstrap实现时间选择器的示例代码

Aug 26 Javascript

浅谈vue路径优化之resolve

Oct 13 Javascript

easyui下拉框动态级联加载的示例代码

Nov 29 Javascript

vue2.0 常用的 UI 库实例讲解

Dec 12 Javascript

10行原生JS实现文字无缝滚动(超简单)

Jan 02 Javascript

Vue.js 动态为img的src赋值方法

Mar 14 Javascript

Vue Cli3 打包配置并自动忽略console.log语句的方法

Apr 23 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始终居于屏幕中间左下左上右上右下的代码集合