您的位置：首页 > Web前端 > JQuery

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

2010-09-08 14:53 369 查看
<script type="text/javascript" src="jquery-1.3.2.min.js"></script><!--添加jquery-->

<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>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航