让DIV块保持在浏览器窗口中央位置

最新推荐文章于 2023-04-13 01:03:24 发布

zhangzikui

最新推荐文章于 2023-04-13 01:03:24 发布

阅读量5.6k

点赞数

分类专栏： JavaScript 文章标签：浏览器 div function border class

本文链接：https://blog.csdn.net/zhangzikui/article/details/7280590

版权

JavaScript 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<script type="text/javascript" src="./jquery-1.4.4.js"></script>
		<style type="text/css">
			.divv
			{
			    position:absolute;
			    top:30%;
			    left:30%;
			    width:80px;
			    height:60px;
			    border:1px solid #666;
			    background-color:#9CF;
			    text-align:center;
			}
		</style>
		<script type="text/javascript">
			$(document).ready(
				function(){
					//页面初始化
					goCenter();
				
					//滚动条滚动
					$(window).scroll(
						function(){
							goCenter();
						}
					);
					//拖动浏览器窗口
					$(window).resize(
						function(){
							goCenter();
						}
					);
				}
			);
			
			function goCenter()
			{
				var h = $(window).height();
				var w = $(window).width();
				var st = $(window).scrollTop();
				var sl = $(window).scrollLeft();

				$(".divv").css("top", ((h-60)/2)+st);
				$(".divv").css("left", ((w-80)/2)+sl);
			}
		</script>
	</head>
	
	<body>
		<div class="divv">中央窗口</div>
	</body>
</html>

zhangzikui

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
让DIV块保持在浏览器窗口中央位置

.divv { position:absolute; top:30%; left:30%; width:80px; height:60px; border:1px solid #666; background-color:#9CF; text-align:center; }
复制链接

扫一扫