怎么让div始终居中浏览器可视范围的中间位置

tangye888 2009-10-31 03:12:47
例如我有个div，先让他隐藏起来，然后我在页面中点击超链接，让这个DIV显示出来。现在的问题是，我有个页面很长，当我没有拉动滚动条时，点击某个超链接，让DIV显示并居中好办，但是当我拉动滚动条点击下面的超链接时，怎么样让这个DIV仍然出现在屏幕可视范围的中部。
其实我的意思就是无论你的页面有多长，只要你点击了让这个DIV显示的超链接，就始终让这个DIV显示在可视范围的中间位置
...全文
1662 17 打赏 收藏 转发到动态 举报
写回复
用AI写文章
17 条回复
切换为时间正序
请发表友善的回复…
发表回复
william威廉 2010-12-31
  • 打赏
  • 举报
 回复
4楼的正解，很好用，学习了！
cocos精品源码 2010-12-31
  • 打赏
  • 举报
 回复
能解决的都是高手！！！ 致敬
zhyzdl 2010-12-31
  • 打赏
  • 举报
 回复
学习了……谢谢！
voice1122 2010-12-31
  • 打赏
  • 举报
 回复
[Quote=引用 8 楼 objector 的回复:]
发错了，把上面代码中的position:absolute改成position:fixed是我给你的最终代码！！
[/Quote]

+1
haoxuea 2010-12-31
  • 打赏
  • 举报
 回复
收藏，学习！
杰必尚 2010-11-14
  • 打赏
  • 举报
 回复
学习了……谢谢！
jsps2t89 2010-11-13
  • 打赏
  • 举报
 回复
function mouseMove(){

var isRn=true;
//定位到目标层的元素
var layer=document.getElementById("centerLayer");

//浏览器宽度
var bWidth=document.documentElement.clientWidth;
//浏览器高度
var bHeight=document.documentElement.clientHeight;

//目标层的宽度
var lWidth=document.getElementById("centerLayer").offsetWidth;
//目标层的高度
var lHeight=document.getElementById("centerLayer").offsetHeight;

//实现效果
if(isRn){

layer.style.pixelLeft=(bWidth-lWidth)/2;
layer.style.pixelTop=(bHeight-lHeight)/2;

}

}
我用document.onkeydown事件测试了下，有点小问题，就是上面代码中的浏览器高度包括了菜单栏标题栏工具栏的高度，你使用那个滚动条的高度代码替换下就可以了，至于代码是什么，我还不知道，不好意思,别的都没问题，你怎么样改变窗口都会居中的
kevindend 2010-11-13
  • 打赏
  • 举报
 回复
8楼正解，支持。
ad0128 2009-11-01
  • 打赏
  • 举报
 回复
纯CSS实现，兼容IE8,IE7,IE6,FF
.div{width:500px;height:400px; position:absolute;top:50%;left:50%;margin:-200px -250px;border:1px solid #ccc;}
Objector 2009-10-31
  • 打赏
  • 举报
 回复
发错了，把上面代码中的position:absolute改成position:fixed是我给你的最终代码！！
Objector 2009-10-31
  • 打赏
  • 举报
 回复 


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 

                      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <!-- delclare meta elements -->

        <meta http-equiv="content-type" content="text/html; charset=utf-8" />



        <title>JavaScript Syntax Highlighter</title>

        <style type="text/css">

            #layer {

                position:absolute; width: 400px; height: 200px; background-color: red

            }

        </style>

    </head>

    <body>

        <div id="layer" style="left: 0px; top:0px"></div>

        

        <script type="text/javascript">

        window.onload = window.onresize = window.onscroll = function() {

            var doc = document,

                layer = doc.getElementById('layer'),

                clientWidth  = window.innerWidth/*W3C*/|| doc.documentElement.clientWidth/*std IE*/||doc.body.clientWidth/*IE quirk mode*/,

                clientHeight = window.innerHeight || doc.documentElement.clientHeight || doc.body.clientHeight;

            layer.style.left = Math.round((clientWidth - layer.offsetWidth) / 2) + 'px';

            layer.style.top  = Math.round((clientHeight - layer.offsetHeight) / 2) + 'px';

        };

        </script>

    </body>

</html>
jre86 2009-10-31
  • 打赏
  • 举报
 回复
你的意思是想让这个DIV始终显示在浏览器窗口的中间，而不是文档流的中间，用JavaScript的浮动框技术，和CSS都可以做到，用CSS一句话就可以解决：
<div style="top:50%;left:50% position:fixed;">这样你的DIV就会脱离文档流，以当前的浏览器窗口为参照来定位。
草根醉秋意 2009-10-31
  • 打赏
  • 举报
 回复 


<div style="height:1000px;"></div>

    <div><input type="button" onclick="alert(document.documentElement.scrollTop)" value="show document.documentElement.scrollTop" />

    <input type="button" onclick="alert(document.documentElement.scrollTop)" value="show document.body.scrollTop" />

    </div>


IE 8: 385 385
FF 3.5: 398 398
z1g2w3i4 2009-10-31
  • 打赏
  • 举报
 回复 
<script type="text/javascript">

    var docEle = function()

    {

        return document.getElementById(arguments[0]) || false;

    }



    function openNewDiv(_id)

    {

        var m = "mask";

        if (docEle(_id)) document.body.removeChild(docEle(_id));

        if (docEle(m)) document.body.removeChild(docEle(m));



        //mask遮罩层



        var newMask = document.createElement("div");

        newMask.id = m;

        newMask.style.position = "absolute";

        newMask.style.zIndex = "1";

        _scrollWidth = Math.max(document.body.scrollWidth,document.documentElement.scrollWidth);

        _scrollHeight = Math.max(document.body.scrollHeight,document.documentElement.scrollHeight);

        newMask.style.width = _scrollWidth + "px";

        newMask.style.height = _scrollHeight + "px";

        newMask.style.top = "0px";

        newMask.style.left = "0px";

        newMask.style.background = "#33393C";

        newMask.style.filter = "alpha(opacity=40)";

        newMask.style.opacity = "0.40";

        document.body.appendChild(newMask);



        //新弹出层



        var newDiv = document.createElement("div");

        newDiv.id = _id;

        newDiv.style.position = "absolute";

        newDiv.style.zIndex = "9999";

        newDivWidth = 400;

        newDivHeight = 200;

        newDiv.style.width = newDivWidth + "px";

        newDiv.style.height = newDivHeight + "px";

        newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";

        newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";

        newDiv.style.background = "#EFEFEF";

        newDiv.style.border = "1px solid #860001";

        newDiv.style.padding = "5px";

        newDiv.innerHTML = " ";

        document.body.appendChild(newDiv);



        //弹出层滚动居中



        function newDivCenter()

        {

            newDiv.style.top = (document.body.scrollTop + document.body.clientHeight/2 - newDivHeight/2) + "px";

            newDiv.style.left = (document.body.scrollLeft + document.body.clientWidth/2 - newDivWidth/2) + "px";

        }

        if(document.all)

        {

            window.attachEvent("onscroll",newDivCenter);

        }

        else

        {

            window.addEventListener('scroll',newDivCenter,false);

        }



        //关闭新图层和mask遮罩层

        var newA = document.createElement("div");

        newA.innerHTML ="取消";

        var newB = document.createElement("TEXTAREA");

        newB.setAttribute("cols","40");

        newB.setAttribute("rows","10");

        newA.onclick = function(){

            if(document.all)

            {

                window.detachEvent("onscroll",newDivCenter);

            }

            else

            {

                window.removeEventListener('scroll',newDivCenter,false);

            }

            document.body.removeChild(docEle(_id));

            document.body.removeChild(docEle(m));

            return false;

        }

        newDiv.appendChild(newB);

        newDiv.appendChild(newA);

    }

</script>

<body>

     

    <a onclick="openNewDiv('newDiv');return false;" style="cursor:pointer">弹出层</a>

    <br><br><br><br><br><br><br><br><br><br><br><br><br><br>



</body>

申明:本代码来自csdn,非本人创作
tangye888 2009-10-31
  • 打赏
  • 举报
 回复
message.style.top=document.documentElement.scrollTop
这个方法只对IE有效啊，在火狐中怎么用啊？？？？
tangye888 2009-10-31
  • 打赏
  • 举报
 回复
大哥具体说明下怎么用嘛
草根醉秋意 2009-10-31
  • 打赏
  • 举报
 回复
用scrollTop属性可以知道滚动条向下滚动了多少像素，其他的调整下就可以了
让html元素随浏览器的大小自适应垂直居中的实现方法
表格可以实现td中的元素垂直居中显示，但是前提条件必须定义td的高才可行。 但是很多时候会用到元素跟随浏览器的大小垂直居中，如在制作展示官网、活动展示网等等的时候。 问题： 实现div垂直居中并在缩放浏览器尺寸的时候仍然居中。 解决方案： 1、浏览器可视区域的高度-元素的高度/2 = 元素距离浏览器可视区域顶部的距离。 (bodyHeight – divHeight)/2 2、浏览器可视区域如果小于元素的高度，即元素距离浏览器可视区域顶部的距离为零。 3、onresize()当浏览器的尺寸改变的时候触发事件。使用onresize()每次改变的时候，重新计算一下元素到顶部的距离。 实现代码：
html让div自动居中,让html div元素随浏览器的大小自适应垂直居中
表格可以实现td中的元素垂直居中显示，但是前提条件必须定义td的高才可行。但是很多时候会用到元素跟随浏览器的大小垂直居中，如在制作展示官网、活动展示网等等的时候。问题：实现div垂直居中并在缩放浏览器尺寸的时候仍然居中。解决方案：1.浏览器可视区域的高度-元素的高度/2 = 元素距离浏览器可视区域顶部的距离。(bodyHeight – divHeight)/22.浏览器可视区域如果小于元素的高度，...
让div在浏览器可视范围居中
我们这里讨论的是在可视范围居中，其他情况请朋友们自行查找资料。 这里我们要用到定位,绝对布局，html代码如下,在页面载入的时候或者手动控制的时候： $('#loginContent').css({ //display:'block', //zIndex:400, position: 'absolute', left: (document.bo
如何让div始终保持在浏览器可视范围的中间
为需要显示在屏幕中央的div设置 position:fixed;
通过JavaScript使div随时居中
学习内容： 下面就跟大家一起简单分析下JS是如何实现让DIV盒子，在页面自动居中，并且随着页面的变动，也能居中。 思路： 一、首先我们的DIV盒子模型，一般是绝对定位于浏览器的，那么首先我们可以先获取整个页面（浏览器的可视区）的宽度、高度。 二、然后获取自身DIV盒子的宽度、高度。 三、用浏览器可视区的宽度、高度，减去DIV自身的宽度，高度，然后除以2。就可以获取到DIV距离页面的top值，left值。在赋值给DIV相应的top值，left值。 四、随着我们的浏览器窗口的改变，让DIV
JavaScript

87,994

社区成员

224,697

社区内容

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今

加载中

查看更多榜单
社区公告
暂无公告

试试用AI创作助手写篇文章吧

+ 用AI写文章