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

javascript 简单抽屉效果的实现代码

Mar 09 Javascript

js 弹出框只弹一次(二次修改之后的)

Nov 26 Javascript

JavaScript实现上下浮动的窗口效果代码

Oct 12 Javascript

javascript设计模式之Adapter模式【适配器模式】实现方法示例

Jan 13 Javascript

BootStrap组件之进度条的基本用法

Jan 19 Javascript

详解AngularJS controller调用factory

May 19 Javascript

Vue.js最佳实践(五招助你成为vuejs大师)

May 04 Javascript

详解JavaScript 中 if / if...else...替换方式

Jul 15 Javascript

Vue框架里使用Swiper的方法示例

Sep 20 Javascript

基于jquery实现九宫格拼图小游戏

Nov 30 jQuery

jQuery实现高级检索功能

May 28 jQuery

JavaScript简易计算器制作

Jan 17 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

You might like

海贼王：最美的悬赏令！

2020/03/02 日漫

sphinx增量索引的一个问题

2011/06/14 PHP

php异步多线程swoole用法实例

2014/11/14 PHP

Laravel中9个不经常用的小技巧汇总

2019/04/16 PHP

THINKPHP5分页数据对象处理过程解析

2020/10/28 PHP

javascript脚本调试方法小结

2008/11/24 Javascript

能说明你的Javascript技术很烂的五个原因分析

2011/10/28 Javascript

不用锚点也可以平滑滚动到页面的指定位置实现代码

2013/05/08 Javascript

js获取系统的根路径实现介绍

2013/09/08 Javascript

基于jquery实现的省市区级联无ajax

2013/09/24 Javascript

javascript实现动态加载CSS

2015/01/26 Javascript

如何高效率去掉js数组中的重复项

2016/04/12 Javascript

JS实现自动阅读单词(有道单词本添加功能)

2016/11/14 Javascript

js实现文本上下来回滚动

2017/02/03 Javascript

JavaScript表单即时验证验证不成功不能提交

2017/08/31 Javascript

js实现炫酷光感效果

2020/09/05 Javascript

[48:20]OpTic vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.18

2018/08/19 DOTA

Python编码时应该注意的几个情况

2013/03/04 Python

python web框架学习笔记

2016/05/03 Python

Python 专题四文件基础知识

2017/03/20 Python

解决Shell执行python文件,传参空格引起的问题

2018/10/30 Python

在Python中将函数作为另一个函数的参数传入并调用的方法

2019/01/22 Python

详解django+django-celery+celery的整合实战

2019/03/19 Python

django模型动态修改参数,增加 filter 字段的方式

2020/03/16 Python

python爬取抖音视频的实例分析

2021/01/19 Python

整理HTML5中支持的URL编码与字符编码

2016/02/23 HTML / CSS

Glamest意大利：女性在线奢侈品零售店

2019/04/28 全球购物

介绍一下write命令

2014/08/10 面试题

毕业生找工作的求职信范文

2013/12/24 职场文书

粗加工管理制度

2014/02/04 职场文书

研究生毕业自我鉴定范文

2014/03/27 职场文书

《有趣的发现》教学反思

2014/04/15 职场文书

护校行动方案

2014/05/31 职场文书

小学感恩教育活动总结

2014/07/07 职场文书

工程服务质量承诺书

2015/04/29 职场文书

PHP设计模式(观察者模式)

2021/07/07 PHP

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

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