首页
所有分类
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 CHECKBOX全选,取消全选,反选方法三
Aug 30 Javascript
用jquery生成二级菜单的实例代码
Jun 24 Javascript
javascript查找字符串中出现最多的字符和次数的小例子
Oct 29 Javascript
jQuery中ajax的post()方法用法实例
Dec 26 Javascript
jQuery 获取多选框的值及多选框中文的函数
May 16 Javascript
VUEJS实战之修复错误并且美化时间（2）
Jun 13 Javascript
jquery实现上传文件大小类型的验证例子(推荐)
Jun 25 Javascript
js继承实现方法详解
Dec 16 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
js实现按座位号抽奖
Apr 05 Javascript
node vue项目开发之前后端分离实战记录
Dec 13 Javascript
用js简单提供增删改查接口
May 12 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
VOLVO(1) DSP(2) S900(1) 接收机(2) R601SW(1) ETON(1) 放大器(1) E1-XM(1) 沃尔沃(1) 矿石收音机(1)
You might like
PHP memcache扩展的三种安装方法
2009/04/26 PHP
php读取图片内容并输出到浏览器的实现代码
2013/08/08 PHP
使用PHP uniqid函数生成唯一ID
2015/11/18 PHP
php实现按天数、星期、月份查询的搜索框
2016/05/02 PHP
PHP如何通过带尾指针的链表实现'队列'
2020/10/22 PHP
javaScript让文本框内的最后一个文字的后面获得焦点实现代码
2013/01/06 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
判断iframe里的页面是否加载完成
2014/06/06 Javascript
jQuery中change事件用法实例
2014/12/26 Javascript
jQuery中:enabled选择器用法实例
2015/01/04 Javascript
AngularJS基础知识笔记之过滤器
2015/05/10 Javascript
jQuery实现带延迟效果的滑动菜单代码
2015/09/02 Javascript
第七篇Bootstrap表单布局实例代码详解(三种表单布局)
2016/06/21 Javascript
jQuery实现打开页面渐现效果示例
2016/07/27 Javascript
webpack本地开发环境无法用IP访问的解决方法
2018/03/20 Javascript
JavaScript fetch接口案例解析
2018/08/30 Javascript
解决vue打包后vendor.js文件过大问题
2019/07/03 Javascript
Vue实现附件上传功能
2020/05/28 Javascript
javascript实现雪花飘落效果
2020/08/19 Javascript
[05:06]TI4西雅图DOTA2前线报道 海涛密探LGD训练
2014/07/09 DOTA
[01:00:10]完美世界DOTA2联赛PWL S2 FTD vs Inki 第二场 11.21
2020/11/24 DOTA
python tensorflow基于cnn实现手写数字识别
2018/01/01 Python
Python 从相对路径下import的方法
2018/12/04 Python
python3发送邮件需要经过代理服务器的示例代码
2019/07/25 Python
Python中zip()函数的解释和可视化(实例详解)
2020/02/16 Python
CSS3实现曲线阴影和翘边阴影
2016/05/03 HTML / CSS
STUBHUB日本：购买和出售全球活动门票
2018/07/01 全球购物
德国苹果商店：MacTrade
2020/05/18 全球购物
中间件分为哪几类
2012/03/14 面试题
vue 中 get / delete 传递数组参数方法
2021/03/23 Vue.js
招商专员岗位职责
2014/02/08 职场文书
反对形式主义、官僚主义、享乐主义和奢靡之风整改措施
2014/09/17 职场文书
2014年教育实习工作总结
2014/11/22 职场文书
学术研讨会欢迎词
2015/01/26 职场文书
行政处罚决定书
2015/06/24 职场文书
信息技术课教学反思
2016/02/23 职场文书