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
发表评论