首页
所有分类
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 判断页面元素是否存在的代码
Aug 14 Javascript
jQuery 方法大全方便学习参考
Feb 25 Javascript
javascript中的缓动效果实现程序
Dec 29 Javascript
使用javascript实现页面定时跳转总结篇
Sep 21 Javascript
jQuery Masonry瀑布流插件使用详解
Nov 17 Javascript
调试JavaScript中正则表达式中遇到的问题
Jan 27 Javascript
纯js代码实现简单计算器
Dec 02 Javascript
ES6 javascript中class静态方法、属性与实例属性用法示例
Oct 30 Javascript
基于javascript 显式转换与隐式转换(详解)
Dec 15 Javascript
小程序点餐界面添加购物车左右摆动动画
Sep 23 Javascript
vue下拉刷新组件的开发及slot的使用详解
Dec 23 Vue.js
关于Javascript闭包与应用的详解
Apr 22 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) 无线电(12) 长波(3) 萨拉雷(1) 广播(8) 怀旧期刊(1) 中学科技(1) 短波(8) 烈阳天道(2) 下载(1)
You might like
php获取本机真实IP地址实例代码
2016/03/31 PHP
php策略模式简单示例分析【区别于工厂模式】
2019/09/25 PHP
javascript 页面划词搜索JS
2009/09/28 Javascript
javascript:void(0)的问题使用探讨
2014/04/10 Javascript
jquery datepicker参数介绍和示例
2014/04/15 Javascript
基于jQuery和CSS3制作数字时钟附源码下载(jquery篇)
2015/11/24 Javascript
基于jQuery实现淡入淡出效果轮播图
2020/07/31 Javascript
AngularJS 服务详细讲解及示例代码
2016/08/17 Javascript
基于JS实现类似支付宝支付密码输入框
2016/09/02 Javascript
vue.js指令v-model使用方法
2017/03/20 Javascript
bootstrap table实现单击单元格可编辑功能
2017/03/28 Javascript
BootStrap selectpicker后台动态绑定数据
2017/06/01 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
vue2导航根据路由传值,而改变导航内容的实例
2017/11/10 Javascript
微信小程序实现定位及到指定位置导航的示例代码
2019/08/20 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
2019/10/22 Javascript
vue实现户籍管理系统
2020/05/29 Javascript
JavaScript中作用域链的概念及用途讲解
2020/08/06 Javascript
[01:29]2014DOTA2展望TI 剑指西雅图DK战队专访
2014/06/30 DOTA
[01:45]DOTA2众星出演！DSPL刀塔次级职业联赛宣传片
2014/11/21 DOTA
flask入门之表单的实现
2018/07/18 Python
PyQt5 加载图片和文本文件的实例
2019/06/14 Python
python可视化篇之流式数据监控的实现
2019/08/07 Python
Python的缺点和劣势分析
2019/11/19 Python
Python2与Python3的区别点整理
2019/12/12 Python
python画图常规设置方式
2020/03/05 Python
html5 sessionStorage会话存储_动力节点Java学院整理
2017/07/06 HTML / CSS
MONNIER Frères英国官网：源自巴黎女士奢侈品配饰电商平台
2018/12/06 全球购物
手工制作的意大利太阳镜和光学元件：Illesteva
2019/01/19 全球购物
模具专业自荐信
2014/05/29 职场文书
重阳节慰问信
2015/02/15 职场文书
个人思想政治总结
2015/03/05 职场文书
火锅店的开业营销方案范本！
2019/07/05 职场文书
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android
threejs太阳光与阴影效果实例代码
2022/04/05 Javascript
idea下配置tomcat避坑详解
2022/04/12 Servers