首页
所有分类
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 相关文章推荐
jQuery中文入门指南，翻译加实例，jQuery的起点教程
Feb 09 Javascript
基于jQuery的输入框在光标位置插入内容, 并选中
Oct 29 Javascript
非常好用的JsonToString 方法 简单实例
Jul 18 Javascript
jQuery的DOM操作之删除节点示例
Jan 03 Javascript
常规表格多表头查询示例
Feb 21 Javascript
深入探究JavaScript中for循环的效率问题及相关优化
Mar 13 Javascript
vue.js 实现点击按钮动态添加li的方法
Sep 07 Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 Javascript
elementUI多选框反选的实现代码
Apr 03 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
Nov 06 Javascript
jquery实现抽奖功能
Oct 22 jQuery
jquery插件实现代码雨特效
Apr 24 jQuery
始终在屏幕中间显示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
MX500(1) PL-365(1) 1 Tube Radio(1) YB400(2) 东方红(1) 直流胆(1) YB235(1) 再生机(1) YB217(1) 森海(1)
You might like
用PHP编写PDF文档生成器
2006/10/09 PHP
用缓存实现静态页面的测试
2006/12/06 PHP
使用php记录用户通过搜索引擎进网站的关键词
2014/02/13 PHP
PHP异常Parse error: syntax error, unexpected T_VAR错误解决方法
2014/05/06 PHP
php实现微信扫码支付
2017/03/26 PHP
laravel5表单唯一验证的实例代码
2019/09/30 PHP
用javascript动态调整iframe高度的方法
2007/03/06 Javascript
javascript 时间比较实现代码
2009/10/28 Javascript
javascript中的一些注意事项 更新中
2010/12/06 Javascript
关于setInterval、setTimeout在jQuery中的使用注意事项
2011/09/28 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
js设置cookie过期当前时间减去一秒相当于立即过期
2014/09/04 Javascript
JS使用oumousemove和oumouseout动态改变图片显示的方法
2015/03/31 Javascript
jquery插件方式实现table查询功能的简单实例
2016/06/06 Javascript
原生JS查找元素的方法(推荐)
2016/11/22 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
微信小程序自定义导航教程（兼容各种手机）
2018/12/12 Javascript
JS闭包经典实例详解
2018/12/20 Javascript
用Vue.js在浏览器中实现裁剪图像功能
2019/06/18 Javascript
Vue中的transition封装组件的实现方法
2019/08/13 Javascript
Webpack的Loader和Plugin的区别
2020/11/09 Javascript
Python 元类使用说明
2009/12/18 Python
简单了解python装饰器原理及使用方法
2019/12/18 Python
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
女性时尚在线：IVRose
2019/02/23 全球购物
美国家居用品和厨具购物网站：DealsDot
2019/10/07 全球购物
生态学毕业生自荐信
2013/10/27 职场文书
个人自我评价和职业目标
2014/01/24 职场文书
办公自动化毕业生求职信
2014/03/09 职场文书
5.12护士节演讲稿
2014/04/30 职场文书
暑期实践个人总结
2015/03/06 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
劳动模范获奖感言
2015/07/31 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
MySQL 原理优化之Group By的优化技巧
2022/08/14 MySQL
postgresql如何找到表中重复数据的行并删除
2023/05/08 MySQL