当前位置: 首页 > 阅读正文

js、jq监测窗口变化onresize方法

2021年9月15日   57 次   690字数

javascript可以使用onresize事件监听窗口是否发生变化,对应的jquery代码是resize()方法

初始化窗口时,并不会触发,仅当窗口变化时才触发。jquery和js的方法不会互相干扰,js代码尽可使用一次多次会覆盖,而jquery使用resize()方法多次均生效

窗口大小变化过程中并不会频繁触发,例如从1920px缩小到678px,在拖动时并不触发,当且仅当拖到完成,触发对应函数。

<html>
<head>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
<script type="text/javascript">
x=0;
window.onresize=function(){  // js
	console.log('a');
}
window.onresize=function(){  // js
	console.log('b');
}
$(document).ready(function(){
$(window).resize(function() {  // jq
  $("span").text(x+=1);
});

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

});
</script>
</head>
<body>
<p>窗口大小被调整过 <span>0</span> 次。</p>
<p>请试着重新调整浏览器窗口的大小。</p>
</body>
</html>

本篇完,还有疑问?留下评论吧

发表评论