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