Jquery教程
Jquery动效
Jquery HTML/CSS
Jquery 事件
jquery常用

Jquery resize()方法

当浏览器窗口的大小更改时,jQuery resize()方法将触发一个resize事件。它绑定事件处理程序以调整事件大小或在元素上触发该事件。此方法可用于执行一些必需的操作,例如在调整窗口大小时调整页面元素时避免滚动条等等。
如果触发了resize事件且元素的尺寸发生变化,则其中的内容元素也会随之调整。

语法

$(selector).resize(function)
此方法接受可选参数 function ,该参数指定每次触发大小调整事件时要执行的函数。
现在,让我们请参阅使用jQuery resize()方法的示例。

示例

在此示例中,我们使用 resize()方法。在这里,我们使用 resize()方法的可选参数。当用户调整窗口大小时,更新后的窗口宽度和高度将显示在屏幕上。它还将显示用户尝试调整窗口大小的次数。
当我们更改窗口的高度时,更新的高度将相应地更改。同样,当我们更改窗口的宽度时,更新的宽度也会相应地更改。
<!DOCTYPE html>
<html>
<head>
<title> jQuery resize() method </title>
<script src = "/ajax/libs/jquery/3.5.1/jquery.min.js"> </script>
<script>
var i = 0;
$(document).ready(function(){
$(window).resize(function(){
$("span").text(i += 1);
var res = "Width = " + $(window).width() + "<br/>Height = " + $(window).height();
$('#para').html(res);
});
});
</script>
<style>
span {
font-weight: bold;
color: red;
font-size: 20px;
}
</style>
</head>
<body>
<h2> This is an example of using the jQuery resize() method. </h2>
<p> Try to resize your browser's window to see the effect. </p>
<p> You have resized the window <span id = "s1"> 0 </span> times.</p>
<p id = "para"> </p>
</body>
</html>
输出:
成功执行上述代码后,输出为-
jQuery resize()方法
当我们尝试调整窗口大小时,输出为-
jQuery resize()方法
昵称: 邮箱:
Copyright © 2022 立地货 All Rights Reserved.
备案号:京ICP备14037608号-4