jquery 层相对于游览器垂直中齐（兼容firefox 和ie）

最新推荐文章于 2026-07-23 22:30:41 发布

原创最新推荐文章于 2026-07-23 22:30:41 发布 · 945 阅读

·

0

·

本内容遵循CC 4.0 BY-SA版权协议

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

收录于

javascript

本文介绍了一种使用JavaScript和jQuery实现页面元素居中的方法，并通过监听滚动事件和窗口大小变化来实时调整位置。

<script type="text/javascript" src="jquery-1.3.2.min.js"></script>

<script type="text/javascript">

function getObjWh(obj){
       var st=document.documentElement.scrollTop ;//滚动条距顶部的距离
       var sl=document.documentElement.scrollLeft ;//滚动条距左边的距离
       var ch=document.documentElement.clientHeight ;//屏幕的高度
       var cw=document.documentElement.clientWidth ;//屏幕的宽度
       var objH=$("#"+obj).height();//浮动对象的高度
       var objW=$("#"+obj).width();//浮动对象的宽度
       var objT=Number (st)+(Number(ch)-Number(objH))/2; //要居中的层的top：值设定
       var objL=Number(sl)+(Number(cw)-Number(objW))/2;
       return objT+"|"+objL;             // 当一个函数需返回两个值时可以用这种方法
    }

    function adjust(){
         var objV=getObjWh("gallery");
        var tbT=objV.split("|")[0]+"px";
        var tbL=objV.split("|")[1]+"px";
        $("#gallery").css({top:tbT,left:tbL});
    }

     $(document).ready(function(){adjust();});//加这一句是firefox在初次加载时不会执行adjust
    $(window).scroll(function(){adjust()});//当屏幕滚动时
    $(window).resize(function(){adjust()});//当屏幕大小发动时

/*综上最简代码

var tbT=document.documentElement.scrollTop+document.documentElement.clientHeight/2-$("#gallery").height()/2;
var tbL=document.documentElement.scrollLeft+document.documentElement.clientWidth/2-$("#gallery").width()/2;
$("#gallery").css({top:tbT,left:tbL});

*/

</script>

<style>

#gallery{ position:absolute; width:300px; height:200px; background:#ccc; z-index:110; display:true;}

</style>

<body>
<div id="gallery">dfddfdfdf<br />dfddfdfdf<br />dfddfdfdf<br />dfddfdfdf<br /></div>
</body>

标签

#firefox #jquery #ie #function

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

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