jQuery resize（）示例

最新推荐文章于 2024-01-27 12:54:20 发布
最新推荐文章于 2024-01-27 12:54:20 发布
阅读量167 收藏
点赞数
文章标签： javascript ViewUI

更改浏览器大小时，将触发jQuery resize（）事件，并且此事件仅绑定到$（window） 。 

$(window).resize(function () {
	$('#msg').text('Browser (Width : ' + $(window).width() 
	+ ' , Height :' + $(window).height() + ' )');
});

要获取浏览器的宽度和高度详细信息，请使用$（window）.width（）和$（window）.height（） 。

自己尝试 

<html>
<head>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>

<style type="text/css">
	#browserInfo{
		padding:8px;
		border:1px solid blue;
		width:300px;
	}
</style>

</head>
<body>
  <h1>jQuery resize() example</h1>

  <h2>Try resize this browser</h2>

  <div id="browserInfo">
  </div>

<script type="text/javascript">
	
   $('#browserInfo').text('Browser (Width : '
                + $(window).width() + ' , Height :' + $(window).height() + ' )');
	
    $(window).resize(function () {
		$('#browserInfo').text('Browser (Width : ' + $(window).width() 
                                 + ' , Height :' + $(window).height() + ' )');
    });
	
</script>
</body>
</html>
试试演示
标记：

翻译自: https://mkyong.com/jquery/jquery-resize-example/

cyan20115
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jquery下div 的resize事件示例代码
10-26
主要介绍了某位大神写的jquery下div 的resize事件,需要的朋友可以参考下
什么是resize事件
keelel的博客
04-18 3272
resize事件是窗口大小改变时发生的事件，可以在窗口开启、最大化、最小化、窗口大小改变（如拖拉改变窗口大小、move语句改变窗口大小、改变width或height属性以改变窗口大小）时发生。
使用jquery.resize.js的时候经常报错，解决思路和方式
qq_28013889的博客
08-13 683
一、遇到的问题 一开始项目中用到了jquery.resize.js这个文件，使用这个文件来监听div等内容的高度和宽度的变化，但是在使用的时候报错了，百度了一下，没有找到问题的原因，问题如下： Uncaught TypeError: Cannot set property 'w' of undefined 具体报错如下: 二、解决思路： 1、一开始觉得是不是这个文件有问题，从网上下一个新的，然后我下了一下，换上了新的，又出了新的错误，不会捣鼓，整了半天，没啥用 2、然后我从网上找有没有js实现监听di
javascript基础学习系列二百七十二： resize 事件和scroll 事件
最新发布
wanmeijuhao的博客
01-27 749
当浏览器窗口被缩放到新高度或宽度时，会触发 resize 事件。这个事件在 window 上触发，因此 可以通过 JavaScript 在 window 上或者为元素添加 onresize 属性来指定事件处理程序。类似于其他在 window 上发生的事件，此时会生成 event 对象，且这个对象的 target 属性在 DOM 22 合规的浏览器中是 document。而 IE8 及更早版本中并没有提供可用的属性。不同浏览器在决定何时触发 resize 事件上存在重要差异。
JavaScript浏览器全屏插件和jQuery元素大小调整插件
Louis Lee's Blog
05-03 6960
JavaScript浏览器全屏插件和jQuery元素大小调整插件1 摘要一些酷炫的网站需要对浏览器或者DOM元素进行自动或触发式全屏化。对于浏览器全屏，提示用户按F11的话似乎有点不太人道，在页面上进行提示会是不错的选择。所以screenfull.js不仅可以对浏览器，而且对单个元素也可以进行全屏事件触发。
JavaScript — resize事件监听窗口变化
热门推荐
旧梦
08-26 3万+
前言 resize 事件是在浏览器窗口大小发生变化时触发，利用该事件可以跟踪窗口大小的变化来动态调整页面的元素显示。 接下来利用 resize 事件实现一个小案例：监听浏览器窗口变化，实时获取该窗口的宽度和高度。 实现 首先写一个获取窗口宽高的方法 const getWindowInfo = () => { const windowInfo = { width: window.innerWidth, hight: window.innerHeight } console.log(wind
jquery实现div拖拽宽度示例代码
01-19
本例是个非常简单的div拖动，有需要的朋友可根据自己的需求，添加相应的代码。欢迎拍砖 代码如下: <!DOCTYPE html PUBLIC “-//...”> <head> <... charset=UTF-8″>...div width resize<...–引用jquery–
jQuery详细教程
04-25
示例 $(this).hide() - 隐藏当前元素 $("p").hide() - 隐藏所有段落 $("p.test").hide() - 隐藏所有 class="test" 的段落 $("#test").hide() - 隐藏所有 id="test" 的元素 提示：jQuery 使用的语法是 XPath 与 CSS ...
React根据宽度自适应高度的示例代码
01-21
CSS无法实现这种动态变化，传统是用jQuery实现。 而在React中无需依赖于JQuery,实现相对比较简单，只要在DidMount后更改width即可 Try on Codepen 需要注意的是在resize时候也要同步变更，需要注册个监听器 ...
jquery事件-resize()方法
Benjamin
06-08 5332
监听窗口缩放事件以便对于当前对象构造大小。JQuery提供了resize事件，在每一个匹配元素的resize事件中绑定一个处理函数，比如适应窗口大小、对齐等等，当文档窗口改变大小时触发 这里有两种监听方式，一种是浏览器窗口的监听，一种是对象缩放比例的监听（是通过点击状态栏的缩放比例实现的） 对于窗口的监听：   $(window).resize(function(){ resiz
jquery-resize加强版
01-10
jquery中的resize只能应用在windwo、document上，不可用在标签元素上例如： $('body').resize(); //这样是无效的。 该文件对resize进行了加强，能够对元素标签起作用，只要引用了该文件，则上面的写法就会生效
jquery实现父元素大小改变插件：jquery-resize
05-02
jquery实现父元素大小改变插件：jquery-resize
jquery解决resize执行两次的问题
zxx_1998的博客
04-03 196
【代码】解决resize执行两次的问题。
关于jquery中resize用法
benbenchong_ok的专栏
01-30 1646
1、改变div尺寸  $('#div').panel('resize', { height: 90 });//初始设置的高度 2、改变后重新resize $(window).resize();
js,jq,resize事件绑定和移除
前端小狮的博客
08-11 1858
窗口的resize事件绑定以后，需要移除(全部移除影响其它绑定事件)，尤其现在常用的单路由页面，在页面销毁时，不移除容易多次绑定，且切换其它路由仍在执行。 //js的 function bindCalListResize (){ console.log(123); } window.addEventListener('resize',bindCalListResize );//绑定 window.removeEventListener("resize",b.
jQuery.resize() 函数详解
weixin_33804582的博客
07-21 300
今天闪存里有人问$(window).resize(function(){//执行事件})；表示没有接触过；果断百度查询一下： resize()函数用于为每个匹配元素的resize事件绑定处理函数。该函数也可用于触发resize事件。此外，你还可以额外传递给事件处理函数一些数据。 resize事件会在元素的尺寸大小被调整时触发。该事件常用于window对象(浏览器窗口)或框架页面。 此外，你可...
jQuery resize() 方法使用
前端小知识
10-08 3771
$(window).resize(function(){      $('span').text(x+=1);  }) 定义和用法 当调整浏览器窗口大小时，发生resize 事件。 resize() 方法触发 resize 事件，或规定当发生 focus 事件时运行的函数;...
jquery resize 如何监听div或其它元素的resize事件
记事本
01-04 1万+
jquery resize 如何监听div或其它元素的resize事件
jqgrid resize
08-21
1. 使用 jQuery 的 resize 方法：通过选中 jqGrid 表格的父元素，并在窗口大小改变时调用 resize 方法来重新调整表格大小。示例代码如下： ```javascript $(window).resize(function() { $("#gridContainer")....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值