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>
本篇完,还有疑问?留下评论吧