首页
所有分类
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 相关文章推荐
js的touch事件的实际引用
Oct 13 Javascript
jQuery中map()方法用法实例
Jan 06 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
文本框只能输入数字的实现方法(兼容IE火狐)
Jun 25 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
BootStrap Validator 版本差异问题导致的submitHandler失效问题的解决方法
Dec 01 Javascript
详解webpack import()动态加载模块踩坑
Jul 17 Javascript
video.js 实现视频只能后退不能快进的思路详解
Aug 09 Javascript
在Vuex使用dispatch和commit来调用mutations的区别详解
Sep 18 Javascript
vue-cli配置全局sass、less变量的方法
Jun 06 Javascript
微信小程序实现自定义动画弹框/提示框的方法实例
Nov 06 Javascript
JS+CSS实现过渡特效
Jan 02 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
东方红(1) 再生机(1) PL-365(1) 德生(17) YB235(1) 1 Tube Radio(1) YB217(1) 修复(2) TECSUN(1) 海燕B411(1)
You might like
Flash空降上海 化身大魔王接受挑战
2020/03/02 星际争霸
Body是什么，该怎么喝出咖啡里的口感
2021/03/03 咖啡文化
PHP入门之常量简介和系统常量
2014/05/12 PHP
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
jquery.form.js实现将form提交转为ajax方式提交的方法
2015/04/07 Javascript
Javascript 字符串模板的简单实现
2016/02/13 Javascript
Jquery on方法绑定事件后执行多次的解决方法
2016/06/02 Javascript
js+css3制作时钟特效
2016/10/16 Javascript
Bootstrap基本插件学习笔记之Tooltip提示工具(18)
2016/12/08 Javascript
简单实现js倒计时功能
2017/02/13 Javascript
React-router 4 按需加载的实现方式及原理详解
2017/05/25 Javascript
jQuery时间戳和日期相互转换操作示例
2018/12/07 jQuery
微信小程序 checkbox使用实例解析
2019/09/09 Javascript
Angular value与ngValue区别详解
2019/11/27 Javascript
Vue脚手架编写试卷页面功能
2020/03/17 Javascript
JS实现进度条动态加载特效
2020/03/25 Javascript
JS实现滑动拼图验证功能完整示例
2020/03/29 Javascript
一篇文章带你使用Typescript封装一个Vue组件(简单易懂)
2020/06/05 Javascript
vue实现简单全选和反选功能
2020/09/15 Javascript
[00:35]TI7不朽珍藏III——寒冰飞龙不朽展示
2017/07/15 DOTA
Python map和reduce函数用法示例
2015/02/26 Python
Python模块搜索概念介绍及模块安装方法介绍
2015/06/03 Python
Python中条件判断语句的简单使用方法
2015/08/21 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
Python后台开发Django的教程详解（启动）
2019/04/08 Python
django 微信网页授权登陆的实现
2019/07/30 Python
Win10+GPU版Pytorch1.1安装的安装步骤
2019/09/27 Python
pandas 空数据处理方法详解
2019/11/02 Python
Python bisect模块原理及常见实例
2020/06/17 Python
python Timer 类使用介绍
2020/12/28 Python
思想汇报格式
2014/01/05 职场文书
元宵节寄语大全
2015/02/27 职场文书
财务出纳岗位职责
2015/03/31 职场文书
商业计划书之服装
2019/09/09 职场文书
灵能百分百第三季什么时候来？
2022/03/15 日漫
我去timi了，一起去timi是什么意思？
2022/04/13 杂记