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的大小。

