jQuery窗口调整大小

jQuery resize() function triggers when the browser window is resized. jQuery resize function attaches a handler, which executes when the resize event is fired.

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

jQuery调整大小 (jQuery resize)

The syntax for using jQuery resize():

使用jQuery resize（）的语法：

resize()
resize（）

This signature is used without any arguments. This function is shortcut for .trigger( "resize" ) function.

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

resize(handler)
调整大小（处理程序）

The handler is a function, which is executed when the browser window is resized.

handler是一个函数，当调整浏览器窗口的大小时执行。

resize(eventData, handler)
调整大小（eventData，处理程序）

eventData is the object that will be passed to the event handler.

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

jQuery resize method is a shortcut for .on('resize', handler) in the second and third variations.

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

jQuery窗口调整大小 (jQuery window resize)

Following example demonstrates jQuery window resize event.

下面的示例演示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 <b> <span>0</span></b> times.</div></body>
</html>

In this example, you can see that the jQuery resize() function is triggered when you change the size of the browser window.

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

The handler attached to the resize() method executes and you can see the count of this event displayed in the <div> element.

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

Note that resize() method will not execute if your HTML page is embedded using iframe, since you are changing the main window size not the iframe size. You can see it in action by visiting below demo page.

请注意，如果您HTML页面是使用iframe嵌入的，则resize（）方法将不会执行，因为您是在更改主窗口的大小，而不是iframe的大小。您可以通过访问下面的演示页面来查看它的运行情况。

jQuery resize（）事件演示 (jQuery resize() event demo)

Reference: API Doc

参考： API文档

翻译自: https://www.journaldev.com/4970/jquery-window-resize

jQuery窗口调整大小相关推荐

JQuery窗口拖动效果
2019独角兽企业重金招聘Python工程师标准>>> JQuery代码 var _z=9999; $(document).ready(function(){var _move=fa ...
cmd命令行窗口调整大小
解决cmd命令行窗口不能调整大小至全屏和调整大小时文字不跟随换行问题. (这是一段废话,为什么写呢?因为字太少,文章内容不够高级,发文助手不让我发,但是我写之前却没搜到我想要的答案,你说气人不气人.) ...
Dosbox窗口调整大小
DOSBox 是一个 DOS 模拟程序,由于它采用的是 SDL 库,所以可以很方便的移植到其他的平台.DOSBox的最新版本已经支持在 Windows.Linux.Mac OS X.BeOS .pal ...
java swt窗口,SWT Java：如何防止窗口调整大小？
I want to disable resizing of window. Any ideas? 解决方案 You can specify the Shell style bits by using ...
jquery教程_jQuery教程
jquery教程 I have written a lot of jQuery tutorial articles. This is an index post for all the jQuery ...
jquery滚动条滚动事件_滚动条和jQuery –使用航点的事件处理
jquery滚动条滚动事件 How to handle scrolling with jQuery. Today we continue jQuery reviews, and our article ...
JQuery 基础知识学习（详尽版）
JQuery 详尽的基础知识学习 jQuery 语法 jQuery 选择器 jQuery 选择器(大全) jQuery 事件 ready() holdReady() on() off() one() ...
python 全栈开发，Day57(响应式页面-@media介绍,jQuery补充,移动端单位介绍,Bootstrap学习)...
昨日内容回顾 ajax //get post 两种方式做请求get 主要是获取数据 post 提交数据同一个路由地址既可以是get请求也可以是post请求一个路由对应一个函数get请求acce ...
Learn OpenGL （一）：打开窗口
原文 Hello Window 作者 JoeyDeVries 翻译 Geequlim, Krasjet 环境VS2015+OpenGL3.3 #include <glad/glad.h> ...

jQuery窗口调整大小

jQuery调整大小 (jQuery resize)

jQuery窗口调整大小 (jQuery window resize)

jQuery resize（）事件演示 (jQuery resize() event demo)

jQuery窗口调整大小相关推荐

最新文章

热门文章