居中

最新推荐文章于 2024-09-26 17:08:53 发布

个人看法

最新推荐文章于 2024-09-26 17:08:53 发布

阅读量338

点赞数

分类专栏： js 文章标签： js javascript

js 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

function center(obj){
var windowWidth = document.documentElement.clientWidth;
var windowHeight = document.documentElement.clientHeight;
var popupHeight = $(obj).height();
var popupWidth = $(obj).width();
$(obj).css({
"position": "absolute",
"top": (windowHeight-popupHeight)/2+$(document).scrollTop(),
"left": (windowWidth-popupWidth)/2
});

}

//滚动的时候自动居中

$(window).scroll(function(){

center(obj);

});

//窗口变化自动居中

$(window).resize(function(){

center(obj);

});

showDiv();
function showDiv(obj){
$(obj).show();
center(obj);
$(window).scroll(function(){
center(obj);
});
$(window).resize(function(){
center(obj);
});
}

//按回车提交
$(document).keydown(function(e){
if(e.keyCode ==13){
//要调用的方法
}
});

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="jquery.js"></script>
<style>
.div1{width: 300px;height: 400px;background: red;}
</style>
</head>
<body>
<div class="div1"><span>居中居中</span></div>
</body>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$('.div1 span').css({
position:'absolute',
left: ($(".div1").width() - $('span').outerWidth())/2,
top: ($(".div1").height() - $('span').outerHeight())/2 + $(document).scrollTop()
});
</script>
</body>
</html>