随滚动条滚动的居中div
<!-- <!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"> 遨游、火狐浏览器就用这个吧-->
<!DOCTYPE>
<<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题</title>
</head>
<body>
</body>
</html>
<head>
<meta charset="UTF-8">
<title>随滚动条滚动的居中div</title>
<script type="text/javascript">
function scrollBox(){
document.getElementById("centerBox").style.top=(document.documentElement.scrollTop+
(document.documentElement.clientHeight-document.getElementById("centerBox").offsetHeight)/2)+"px";
document.getElementById("centerBox").style.left=(document.documentElement.scrollLeft+
(document.documentElement.clientWidth-document.getElementById("centerBox").offsetWidth)/2)+"px";
}
window.onload=function(){
scrollBox();
}
window.onscroll=function(){
scrollBox();
}
// function test(){
// scrollBox();
// }
// window.onscroll=test;//注意别写成onScroll,JS是区分大小写的,我就因为写错了,搞了半天效果都没出来
// window.onload=test;//注意别写成onLoad
</script>
</head>
<body>
<div style="width:400px; height:400px; border:1px solid #f1f1f1; background-color:red; position:absolute;
top:0px; left:0px;" id="centerBox"></div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div>复制多行</div>
<div style="width:1200px;">aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa</div>
</body>
</html>
PS:QMM亲自动手做的,自己做的总有成就感!
随滚动条滚动的居中div的更多相关文章
- 让div固定在顶部不随滚动条滚动
让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 如何通过JQuery将DIV的滚动条滚动到指定的位置
这里有一个方法可以将DIV的滚动条滚动到其子元素所在的位置,方便自动定位. var container = $('div'), inner = $('#inner'); container.scrol ...
- jquery控制div随滚动条滚动效果
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jquery div随滚动条 ...
- css固定div头部 滚动条滚动内容
页面布局,固定头部,滚动下方内容 实际场景 在制作页面的时候,经常会遇到要这样的情况:整个页面,整体分三大模块,头部固定,内容区域,左边固定,右边可以滚动. 最终想要的效果 案例源码 <!DOC ...
- 让div固定在顶部不随滚动条滚动【转】
让div固定在顶部不随滚动条滚动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...
- 设置DIV随滚动条滚动而滚动
有段时间没有碰Web端了,最近做了个功能,需要做个DIV随滚动条滚动而滚动,mark一下: 源码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1 ...
- div固定在浏览器的最上方,不随滚动条滚动
#topDIV { position: fixed; ; ; width: 100%; height: 35px; border-bottom: 1px solid #eee; background- ...
- js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动)
本文为大家详细介绍下使用js实现遮罩弹出层居中,且随浏览器窗口滚动条滚动,示例代码如下,感兴趣的朋友可以参考下, js+css 实现遮罩居中弹出层(随浏览器窗口滚动条滚动) 下面看看我的原始代码: & ...
- jQuery 滚动条 滚动到底部(下拉到底部) 加载数据(触发事件、处理逻辑)、分页加载数据
1.针对浏览器整个窗口滚动 主要代码: <script type="text/javascript"> ; function GetProductListPageFun ...
随机推荐
- gcc/g++等编译器 编译原理: 预处理,编译,汇编,链接各步骤详解
摘自http://blog.csdn.net/elfprincexu/article/details/45043971 gcc/g++等编译器 编译原理: 预处理,编译,汇编,链接各步骤详解 C和C+ ...
- 聚类算法初探(五)DBSCAN
最近由于工作需要,对聚类算法做了一些相关的调研.现将搜集到的资料和自己对算法的一些理解整理如下,供大家参考. 另外在算法代码方面,我也做了一些实现(包括串行和并行),欢迎感兴趣的朋友探讨和交流. 第一 ...
- BZOJ 1833 ZJOI2010 count 数字计数 数位DP
题目大意:求[a,b]间全部的整数中0~9每一个数字出现了几次 令f[i]为i位数(算前导零)中每一个数出现的次数(一定是同样的,所以仅仅记录一个即可了) 有f[i]=f[i-1]*10+10^(i- ...
- iOS开发-使用Storyboard进行界面跳转及传值
前言:苹果官方是推荐我们将所有的UI都使用Storyboard去搭建,Storyboard也是一个很成熟的工具了.使用Storyboard 去搭建所有界面,我们可以很迅捷地搭建出复杂的界面,也就是说能 ...
- Android studio SweetAlert for Android
找到个开源项目.github:https://github.com/pedant/sweet-alert-dialog 效果图:https://raw.githubusercontent.com/pe ...
- Format类及其子类功能和使用方法具体解释
Format类及其子类功能和使用方法具体解释 1. Format类结构: · java.lang.Object · java.text.Format · ...
- JavaScript创建类的方式
一些写类工具函数或框架的写类方式本质上都是 构造函数+原型.只有理解这一点才能真正明白如何用JavaScript写出面向对象的代码,或者说组织代码的方式使用面向对象方式.当然用JS也可写出函数式的代码 ...
- 【矩阵乘法经典应用】【ZOJ3497】【Mistwa】
题意:给定一个有向图(最多25个节点,每个节点的出度最多为4),给定起点和终点,然后从起点开始走,走到终点就停止,否则一直往下走,问能不能P步到达终点.也就是说从起点出发,走一条长度为P的路径,路径中 ...
- 图像、帧、片、NALU概念理解
图像.帧.片.NALU 是学习 H.264 的人常常感到困惑的一些概念. H.264 是一次概念的革新,它打破常规,完全没有 I 帧.P帧.B 帧的概念,也没有 IDR 帧的概念.对于 H.264 中 ...
- Oracle的分页查询语句优化
Oracle的分页查询语句基本上可以按照本文给出的格式来进行套用. (一) 分页查询格式: SELECT * FROM ( SELECT A.*, ROWNUM RN FROM (SELECT ...