首页
所有分类
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陷阱清单
May 31 Javascript
javascript判断iphone/android手机横竖屏模式的函数
Dec 20 Javascript
JS小功能(onmouseover实现选择月份)实例代码
Nov 28 Javascript
深入分析JSONP跨域的原理
Dec 10 Javascript
Windows下用PyCharm和Visual Studio开始Python编程
Oct 26 Javascript
js实现页面跳转的五种方法推荐
Mar 10 Javascript
javascript RegExp 使用说明
May 21 Javascript
Js 获取当前函数参数对象的实现代码
Jun 20 Javascript
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
Dec 20 Javascript
jQuery使用ajax方法解析返回的json数据功能示例
Jan 10 Javascript
JavaScript实现区块链
Mar 14 Javascript
vue实现todolist功能、todolist组件拆分及todolist的删除功能
Apr 11 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
爱尔兰购物网站(30) CPU(2) 英国购物网站(954) 纸巾盒(1) 德生G88(1) 天梯图(1) 香港购物网站(84) 美国购物网站(1542) SLi Minor 2020(63) AE3805(1)
You might like
PHP 柱状图实现代码
2009/12/04 PHP
thinkPHP微信分享接口JSSDK用法实例
2017/07/07 PHP
PHP chunk_split()函数讲解
2019/02/12 PHP
php 中self,this的区别和操作方法实例分析
2019/11/04 PHP
一个无限级XML绑定跨框架菜单（For IE）
2007/01/27 Javascript
js播放wav文件(源码)
2013/04/22 Javascript
用jquery统计子菜单的条数示例代码
2013/10/18 Javascript
JavaScript控制各种浏览器全屏模式的方法、属性和事件介绍
2014/04/03 Javascript
JS实现的网页背景闪电闪烁效果代码
2015/10/17 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
jQuery mobile 移动web(4)
2015/12/20 Javascript
Node.js插件安装图文教程
2016/05/06 Javascript
javascript类型系统_正则表达式RegExp类型详解
2016/06/24 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
解决jquery appaend元素中id绑定事件失效的问题
2017/09/12 jQuery
vue中多路由表头吸顶实现的几种布局方式
2019/04/12 Javascript
小程序中canvas的drawImage方法参数使用详解
2019/07/04 Javascript
Vue初始化中的选项合并之initInternalComponent详解
2020/06/11 Javascript
Flexible.js可伸缩布局实现方法详解
2020/11/13 Javascript
[05:16]《大圣！大圣》——DOTA2新英雄齐天大圣配音李世宏老师专访
2016/12/13 DOTA
python网络编程学习笔记(五)：socket的一些补充
2014/06/09 Python
python实现简单的socket server实例
2015/04/29 Python
老生常谈Python之装饰器、迭代器和生成器
2017/07/26 Python
在OpenCV里使用Camshift算法的实现
2019/11/22 Python
python求解汉诺塔游戏
2020/07/09 Python
python修改微信和支付宝步数的示例代码
2020/10/12 Python
css3实现顶部社会化分享按钮示例
2014/05/06 HTML / CSS
Viking比利时：购买办公用品
2019/10/30 全球购物
新加坡一家在线男士皮具品牌：Faire Leather Co.
2019/12/01 全球购物
大学本科毕业生的自我鉴定
2013/11/26 职场文书
设备售后服务承诺书
2014/05/30 职场文书
英文邀请函
2015/02/02 职场文书
音乐课外活动总结
2015/05/09 职场文书
高中班主任工作总结（范文）
2019/08/20 职场文书
《追风筝的人》：人心中的成见是座大山，但请不忘初心
2019/11/15 职场文书