编程 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 相关文章推荐

JavaScript中的apply和call函数详解

Jul 20 Javascript

node.js中的fs.linkSync方法使用说明

Dec 15 Javascript

jQuery()方法的第二个参数详解

Apr 29 Javascript

使用Raygun来自动追踪AngularJS中的异常

Jun 23 Javascript

jquery实现简单的全选和反选功能

Jan 02 Javascript

jquery+ajax实现直接提交表单实例分析

Jun 17 Javascript

JS实现关闭当前页而不弹出提示框的方法

Jun 22 Javascript

全面了解addEventListener和on的区别

Jul 14 Javascript

解决vue 引入子组件报错的问题

Sep 06 Javascript

微信公众号平台接口开发菜单管理的实现

Aug 14 Javascript

微信小程序之 catalog 切换实现解析

Sep 12 Javascript

浅析Vue 中的 render 函数

Feb 28 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

You might like

判“新”函数：得到今天与明天的秒数

2006/10/09 PHP

解析用PHP实现var_export的详细介绍

2013/06/20 PHP

Django中的cookie与session操作实例代码

2017/08/17 PHP

js中的window.open返回object的错误的解决方法

2009/08/15 Javascript

javascript 无提示关闭窗口脚本

2009/08/17 Javascript

Extjs学习笔记之五一个小细节renderTo和applyTo的区别

2010/01/07 Javascript

用jQuery扩展自写的 UI导航

2010/01/13 Javascript

Jquery方式获取iframe页面中的 Dom元素

2014/05/07 Javascript

JavaScript数组Array对象增加和删除元素方法总结

2015/01/20 Javascript

jQuery实现立体式数字滚动条增加效果

2016/12/21 Javascript

百度地图JavascriptApi Marker平滑移动及车头指向行径方向

2017/03/13 Javascript

JS解决移动web开发手机输入框弹出的问题

2017/03/31 Javascript

jquery实现tab选项卡切换效果（悬停、下方横线动画位移）

2017/05/05 jQuery

jquery.masonry瀑布流效果

2017/05/25 jQuery

underscore之function_动力节点Java学院整理

2017/07/11 Javascript

JavaScript实现的原生态Tab标签页功能【兼容IE6】

2017/09/18 Javascript

es6中比较有用的7个技巧小结

2019/07/12 Javascript

Python3 中把txt数据文件读入到矩阵中的方法

2018/04/27 Python

利用python对Excel中的特定数据提取并写入新表的方法

2018/06/14 Python

对Python强大的可变参数传递机制详解

2019/06/13 Python

关于ResNeXt网络的pytorch实现

2020/01/14 Python

使用TensorFlow搭建一个全连接神经网络教程

2020/02/06 Python

Python 之 Json序列化嵌套类方式

2020/02/27 Python

PyCharm 在Windows的有用快捷键详解

2020/04/07 Python

CSS3线性渐变简单实现以及该属性在浏览器中的不同

2012/12/12 HTML / CSS

惠普加拿大在线商店：HP加拿大

2017/09/15 全球购物

Delphi软件工程师试题

2013/01/29 面试题

优秀毕业生推荐信

2013/11/02 职场文书

毕业论文评语大全

2014/04/29 职场文书

彩妆大赛策划方案

2014/05/13 职场文书

普通党员个人对照检查材料

2014/09/18 职场文书

工商局局长个人对照检查材料思想汇报

2014/09/23 职场文书

生日答谢词

2015/01/05 职场文书

初中英语教师个人工作总结2015

2015/07/21 职场文书

pytest配置文件pytest.ini的详细使用

2021/04/17 Python

Go语言读取txt文档的操作方法

2022/01/22 Golang

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

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