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

最新推荐文章于 2020-10-16 17:59:17 发布
最新推荐文章于 2020-10-16 17:59:17 发布
阅读量1.1k 收藏 1
点赞数
分类专栏： js 学习 文章标签： div css javascript function xhtml class
学习 同时被 2 个专栏收录
25 篇文章 0 订阅
订阅专栏
js
12 篇文章 0 订阅
订阅专栏

转自：http://www.mbzhan.com/biancheng/JavaScript/15794.html

 

<!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.οnscrοll=scall;
window.οnresize=scall;
window.οnlοad=scall;
//-->
</SCRIPT>
<div style="position: absolute; top: 0px; left: 0px; width: 10000px; height: 4000px;"></div>
</BODY>
</HTML>

BenjaminP
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
将div固定在屏幕中间
03-17
将div固定在屏幕中间 将div固定在屏幕中间 将div固定在屏幕中间 将div固定在屏幕中间
div+css 上下左右移动
热门推荐
wtt561111的专栏
01-16 6万+
利用div+css，使得选中的对象，上下左右进行位置移动。
DIV的属性
weixin_30314813的博客
05-13 1966
一、常用属性 1、Height:设置DIV的高度；Width:设置DIV的宽度。 2、margin:用于设置DIV的外延边距，也就是到父容器的距离。margin:后面跟有四个距离分别为到父容器的上-右-下-左边的距离；margin: [top][right][bottom][left] 可以分别设置：margin-left:到父容器左边框的距离；margin-right:到父容器右边框的距...
DIV居中，居于窗口四角的方法
程序员"说书"
05-27 870
<br /><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" mce_href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" target="_blank">http://www.w3.org/TR/xhtml1/DTD/xhtml
小div位于大div四个角
qq_48058942的博客
10-16 270
代码
常见的div盒子居中（上下左右）实现
weixin_30655569的博客
07-12 1517
关于div的上下左右居中，之前总是学完之后忘记，现在总结一下并记录下来，常见的有以下的几种 实现的效果图： 1.使用absolute进行绝对定位 注：这方法,需要知道子元素的宽高,但是不需要知道父元素的宽高 2.利用margin的auto来实现 注：实现原理是设置margin自动适应,然后设置定位的上下左右都为0,就如四边均衡受力从而实现盒子的居中 3....
div自动居于窗口的正中间的css原理
q1054261752的博客
10-18 8799
.window{ width: 400px; position: absolute; margin-left: -200px; margin-top: -80px; top: 50%; left: 50%; display: block; z-index: 2000; border: 1px solid #006699; }原理是这样的： 因为这个块元素是绝对定位positio
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合.docx
01-19
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合.docx
始终在屏幕中间显示Div的代码(css+js)
10-28
如何始终在屏幕中间显示Div需要的朋友可以参考下。
js 实现 始终在屏幕右下角的图片
03-30
js 实现 始终在屏幕右下角的图片! 值得下载看看!资源免费,大家分享!!
css之div出现在屏幕正中央
之乎者也的博客
08-29 4186
实测chrom与Firefox可用 position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);  
Div总在右下角的CSS实现方法
05-24 403
<html> <head> <title>DIV始终固定位置显示</title> <style> body {margin:0; padding:0 10px 0 10px;height:100%;overflow:au...
div四个角显示框
牟云飞的博客
12-27 3007
&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"&gt; &lt;HTML&gt; &lt;HEAD&gt; &lt;TITLE&gt; New Document &lt;/TITLE&gt; &lt;/HEAD&gt; &lt;BODY&gt; &lt;!-- 第一种方式
上、下、左、右键的ASCII值
张宜强的博客
11-15 9631
今天写一个东西的时候发现键盘输入上下左右四个键的时候，只有知道ASCII值之后才能判断，记录一下四个键的ASCII值 上 ↑：72 下 ↓： 80 左 ←： 75 右 →： 77 ...
根据四个点坐标排列出左上右上右下左下位置关系
shuwu
10-28 7549
欢迎使用Markdown编辑器写博客本Markdown编辑器使用StackEdit修改而来，用它写博客，将会带来全新的体验哦： Markdown和扩展Markdown简洁的语法 代码块高亮 图片链接和图片上传 LaTex数学公式 UML序列图和流程图 离线写博客 导入导出Markdown文件 丰富的快捷键 快捷键 加粗 Ctrl + B 斜体 Ctrl + I 引用 Ctrl
BOM应用
weihongda666的博客
01-10 272
·  open打开窗口 ·  write ·  write应用（在文本框内输入内容 点击打开新的页面并显示文本框的内容） oBtn.onclick=function () { //创建另一个页面为空，如果后面写_self就是在本页面上替换 var oNew=window.open('about:blank','_blank') oNew.document.write(
css 和div 如何实现网页右下角提示框
[IT 男人帮] 的专栏
07-03 1870
html>head>meta http-equiv="Content-Type" content="text/html; charset=gb2312">meta name="Keywords" content="51windows.Net">META NAM
使用javascript+css+div创建动态用户界面
最新发布
12-24
还可以使用CSS来响应不同屏幕尺寸的布局变化，使用户界面在不同设备上都能正常显示。 另外，我们还可以使用JavaScript来监控用户输入，并实时更新div元素的内容。比如，当用户在输入框中输入文字时，JavaScript可以...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值