首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 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>

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

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

Javascript 相关文章推荐
javascript 写类方式之九
Jul 05 Javascript
Javascript中valueOf与toString区别浅析
Mar 19 Javascript
Ajax异步提交表单数据的说明及方法实例
Jun 22 Javascript
jquery 利用show和hidden实现级联菜单示例代码
Aug 09 Javascript
IE6-8中Date不支持toISOString的修复方法
May 04 Javascript
jQuery实现底部浮动窗口效果
Sep 07 Javascript
React教程之Props验证的具体用法（Props Validation）
Sep 04 Javascript
javaScript手机号码校验工具类PhoneUtils详解
Dec 08 Javascript
vue+webpack 打包文件 404 页面空白的解决方法
Feb 28 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
原生js实现轮播图特效
May 04 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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
数调机(1) SONY(15) PL-880(1) RP-F11(1) 德劲(5) 索尼(5) 手调机(1) TOSHIBA(1) ICF-7600(1) 东芝(1)
You might like
PHP函数checkdnsrr用法详解(Windows平台用法)
2016/03/21 PHP
用倒置滤镜把div倒置，再把table倒置。
2007/07/31 Javascript
document.createElement()用法及注意事项(ff下不兼容)
2013/03/13 Javascript
js 判断浏览器使用的语言示例代码
2014/03/22 Javascript
node.js中的favicon.ico请求问题处理
2014/12/15 Javascript
SpringMVC框架下JQuery传递并解析Json格式的数据是如何实现的
2015/12/10 Javascript
AngularJS基础 ng-if 指令用法
2016/08/01 Javascript
一个极为简单的requirejs实现方法
2016/10/20 Javascript
js对字符串进行编码的方法总结(推荐)
2016/11/10 Javascript
解析JavaScript数组方法reduce
2016/12/12 Javascript
js实现本地图片文件拖拽效果
2017/07/18 Javascript
Angular使用 ng-img-max 调整浏览器中的图片的示例代码
2017/08/17 Javascript
vue.js通过路由实现经典的三栏布局实例代码
2018/07/08 Javascript
D3.js(v3)+react 实现带坐标与比例尺的散点图 (V3版本)
2019/05/09 Javascript
详解JavaScript 事件流
2020/09/02 Javascript
[48:21]Mski vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[01:38]完美世界DOTA2联赛PWL S3 集锦第四期
2020/12/21 DOTA
梯度下降法介绍及利用Python实现的方法示例
2017/07/12 Python
python3+PyQt5+Qt Designer实现扩展对话框
2018/04/20 Python
在Python中pandas.DataFrame重置索引名称的实例
2018/11/06 Python
python批量获取html内body内容的实例
2019/01/02 Python
python使用threading.Condition交替打印两个字符
2019/05/07 Python
Python单元测试工具doctest和unittest使用解析
2019/09/02 Python
python3实现微型的web服务器
2019/09/03 Python
关于Python中定制类的比较运算实例
2019/12/19 Python
Python class的继承方法代码实例
2020/02/14 Python
Win10下配置tensorflow-gpu的详细教程（无VS2015/2017）
2020/07/14 Python
HTML5拖放效果的实现代码
2016/11/17 HTML / CSS
英国鞋类及配饰零售商：Kurt Geiger
2017/02/04 全球购物
ETO男装官方网店：ETO Jeans
2019/02/28 全球购物
美国第一大药店连锁机构：Walgreens（沃尔格林）
2019/10/10 全球购物
班长自荐书范文
2014/02/11 职场文书
志愿者活动总结范文
2014/04/26 职场文书
教师群众路线教育实践活动学习笔记
2014/11/05 职场文书
大学生求职自荐信范文
2015/03/04 职场文书
安全学习心得体会范文
2016/01/18 职场文书