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

jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法

Jan 01 Javascript

jquery遍历select元素(实例讲解)

Dec 31 Javascript

js实现单击图片放大图片的方法

Feb 17 Javascript

vue中动态绑定表单元素的属性方法

Feb 23 Javascript

原生js实现拖拽功能基本思路详解

Apr 18 Javascript

vue动画效果实现方法示例

Mar 18 Javascript

D3.js的基础部分之数组的处理数组的排序和求值(v3版本)

May 09 Javascript

js/jQuery实现全选效果

Jun 17 jQuery

微信小程序获取位置展示地图并标注信息的实例代码

Sep 01 Javascript

JS防抖和节流实例解析

Sep 24 Javascript

Vue管理系统前端之组件拆分封装详解

Aug 23 Javascript

vue3.0自定义指令（drectives)知识点总结

Dec 27 Vue.js

始终在屏幕中间显示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

PHP无限分类(树形类)的深入分析

2013/06/02 PHP

ThinkPHP3.1新特性之字段合法性检测详解

2014/06/19 PHP

PHP输出九九乘法表代码实例

2015/03/27 PHP

学习php设计模式 php实现模板方法模式

2015/12/08 PHP

JavaScript 获得选中文本内容的方法

2009/02/15 Javascript

IE 上下滚动展示模仿Marquee机制

2009/12/20 Javascript

解决jquery的.animate()函数在IE6下的问题

2010/12/03 Javascript

jQuery学习笔记(3)--用jquery(插件)实现多选项卡功能

2013/04/08 Javascript

node中socket.io的事件使用详解

2014/12/15 Javascript

JavaScript中的类(Class)详细介绍

2014/12/30 Javascript

javascript无刷新评论实现方法

2015/05/13 Javascript

javascript实现方法调用与方法触发小结

2016/03/26 Javascript

Vue.js快速入门教程

2016/09/07 Javascript

使用jquery.qrcode.js生成二维码插件

2016/10/17 Javascript

通过扫描二维码打开app的实现代码

2016/11/10 Javascript

修改ligerui 默认确认按钮的方法

2016/12/27 Javascript

JS+DIV实现的卷帘效果示例

2017/03/22 Javascript

原生JS京东轮播图代码

2017/03/22 Javascript

详解创建自定义的Angular Schematics

2018/06/06 Javascript

jQuery实现模糊搜索功能的方法分析

2018/06/29 jQuery

原生js实现瀑布流效果

2020/03/09 Javascript

小程序自定义弹框效果

2020/11/16 Javascript

详解Python的单元测试

2015/04/28 Python

Python微信库:itchat的用法详解

2017/08/14 Python

python机器学习之贝叶斯分类

2018/03/26 Python

python向已存在的excel中新增表,不覆盖原数据的实例

2018/05/02 Python

详解Django 中是否使用时区的区别

2018/06/14 Python

Python button选取本地图片并显示的实例

2019/06/13 Python

python实现四人制扑克牌游戏

2020/04/22 Python

Python3读取和写入excel表格数据的示例代码

2020/06/09 Python

Python本地及虚拟解释器配置过程解析

2020/10/13 Python

Java文件和目录（IO）操作

2014/08/26 面试题

Java里面Pass by value和Pass by Reference是什么意思

2016/05/02 面试题

企业安全生产目标责任书

2014/07/23 职场文书

奖学金申请个人主要事迹材料

2015/11/04 职场文书

Python 机器学习工具包SKlearn的安装与使用

2021/05/14 Python

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

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