jQuery动态获取窗口宽高

文章描述:

用户拖放浏览器窗口时,实时动态获取窗口宽高值

html

<p>窗口大小被调整过 <span>0</span> 次。</p>
<p>请试着重新调整浏览器窗口的大小。</p>

 

script

x=0;
$(document).ready(function(){
	$(window).resize(function() {
	  $("span").text(x+=1);
	});
});

 

操作元素

html

<div class="banner">
	
</div>

 

script

x=0;
$(document).ready(function(){

	var div_w = '1200'; //$('.banner').outerWidth();
    var div_h = '300'; //$('.banner').outerHeight();
	
	var win_w = $(window).width();
	var win_h = $(window).height();

	var bl = (win_w / div_w).toFixed(2)
	
	var b_height = (div_h * bl).toFixed(2)
	
	$('.banner').css({height:b_height+'px'})
	
	$(window).resize(function() {
		$("span").text(x+=1);
		
		var div_w = '1200';
		var div_h = '300';
		
		var win_w = $(window).width();
		var win_h = $(window).height();
		
		var bl = (win_w / div_w).toFixed(2)
		
		var b_height = (div_h * bl).toFixed(2)
		
		$('.banner').css({height:b_height+'px'})
		
	});

});

 

style

.banner{ max-width:1200px; height:300px; background:#00AAEE; margin:0 auto; }

 

发布时间:2022/08/08

发表评论