jQuery窗口调整大小

时间:2020-02-23 14:46:16  来源:igfitidea点击:

调整浏览器窗口大小时,jQuery resize()函数将触发。
jQuery resize函数附加一个处理程序,该处理程序在触发resize事件时执行。

jQuery调整大小

使用jQuery resize()的语法:

  • resize()

该签名不带任何参数。
该函数是.trigger(" resize")函数的快捷方式。

  • resize(handler)

处理程序是一个功能,当调整浏览器窗口的大小时执行。

  • resize(eventData, handler)

eventData是将传递给事件处理程序的对象。

jQuery调整大小方法是第二和第三种变体中.on('resize',handler)的快捷方式。

jQuery窗口调整大小

下面的示例演示jQuery窗口调整大小事件。

<!DOCTYPE html>
<html>
<head>
<title>jQuery Resize</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<style>
p {
color: green;
}
div {
width: 80px;
height: 80px;
float: left;
padding: 10px;
margin: 10px;
background-color: yellow;
}
</style>
<script>
var x=0;
$(document).ready(function(){
$(window).resize(function(){
  $("span").text(x++);
});
});
</script>
</head>
<body>

<p>Change your window size</p>
<div>Resized  0 times.</div>

</body>
</html>

在此示例中,您可以看到更改浏览器窗口的大小时触发了jQuery resize()函数。

附加到resize()方法的处理程序将执行,您可以在<div>元素中看到此事件的计数。

请注意,如果您HTML页面是使用iframe嵌入的,则resize()方法将不会执行,因为您是在更改主窗口的大小而不是iframe的大小。