jq响应式布局并计数

最新推荐文章于 2022-02-25 11:00:48 发布

elegancy_

最新推荐文章于 2022-02-25 11:00:48 发布

阅读量571

点赞数

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>导航栏</title>
<script src="jquery/jquery-1.8.2.min.js"></script>
<style>
*{
	margin:0;
	padding:0;	
}

#switcher{
	width:100%;
	height:40px;
	background:#00A0E9;
	position:fixed;
	top:0;
	z-index:99999;
}

#screen_count{
	float:right;
	height:40px;
	line-height:50px;	
}

#Contenter_All_wrapper{
	position:absolute;
	top:40px;	
	overflow:auto;		
}

#Contenter_All{
	overflow:auto;
}
</style>
<script>
$(function(){
	var fixHeight = $('#switcher').height();
	var windowHeight = $(window).height();
	
	$('#Contenter_All').attr('height', windowHeight-fixHeight + 'px');
});

$(window).load(function() {
	x=0;
	$(document).ready(function(){
		$(window).resize(function() {
  			$('#screen_count span').text(x+=1);
		});
	});
});
</script>
</head>
<body>

</head>
<body>
<div id="switcher">
	<div id="screen_count">
		<p>窗口大小被调整过 <span>0</span> 次。请试着重新调整浏览器窗口的大小。</p>
	</div>
</div>
<div id="Contenter_All">
	 1212313<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
         <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>123
</div>
</body>
</html>

效果图：