JQuery resize和scroll方法

最新推荐文章于 2024-09-04 20:18:34 发布
最新推荐文章于 2024-09-04 20:18:34 发布
阅读量117 收藏 1
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/jrri/p/11347622.html
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>resize_scroll</title>
    <script src="js/jquery-1.12.4.min.js"></script>
    <!-- 
    
        需要注意的一点是,在resize和scroll方法中.
        scroll可是作为window和document的方法.
        但是resize只能作为window的方法.

     -->
    <script>
        
        $(function(){

            $(window).resize(function(){
                //  当屏幕变化的时候触发
                console.log( $(this).width() );
                console.log( $(this).height() );
            }) 
            $(window).scroll(function(){
                document.title = $(this).scrollTop()
                // document.title是JavaScript原生的方法.显示在浏览器窗口的标题栏位置.
            })



        })


    </script>
</head>
<body>
    <ul class="list">
        <li>
            第1个文档<br><br><br><br><br><br>
        </li>
        <li>
            第2个文档<br><br><br><br><br><br>
        </li>
        <li>
            第3个文档<br><br><br><br><br><br>
        </li>
        <li>
            第4个文档<br><br><br><br><br><br>
        </li>
        <li>
            第5个文档<br><br><br><br><br><br>
        </li>
        <li>
            第6个文档<br><br><br><br><br><br>
        </li>
        <li>
            第7个文档<br><br><br><br><br><br>
        </li>
        <li>
            第8个文档<br><br><br><br><br><br>
        </li>
    </ul>
    <ul class="list">
        <li>
            第1个文档<br><br><br><br><br><br>
        </li>
        <li>
            第2个文档<br><br><br><br><br><br>
        </li>
        <li>
            第3个文档<br><br><br><br><br><br>
        </li>
        <li>
            第4个文档<br><br><br><br><br><br>
        </li>
        <li>
            第5个文档<br><br><br><br><br><br>
        </li>
        <li>
            第6个文档<br><br><br><br><br><br>
        </li>
        <li>
            第7个文档<br><br><br><br><br><br>
        </li>
        <li>
            第8个文档<br><br><br><br><br><br>
        </li>
    </ul>
    <ul class="list">
        <li>
            第1个文档<br><br><br><br><br><br>
        </li>
        <li>
            第2个文档<br><br><br><br><br><br>
        </li>
        <li>
            第3个文档<br><br><br><br><br><br>
        </li>
        <li>
            第4个文档<br><br><br><br><br><br>
        </li>
        <li>
            第5个文档<br><br><br><br><br><br>
        </li>
        <li>
            第6个文档<br><br><br><br><br><br>
        </li>
        <li>
            第7个文档<br><br><br><br><br><br>
        </li>
        <li>
            第8个文档<br><br><br><br><br><br>
        </li>
    </ul>
    <ul class="list">
        <li>
            第1个文档<br><br><br><br><br><br>
        </li>
        <li>
            第2个文档<br><br><br><br><br><br>
        </li>
        <li>
            第3个文档<br><br><br><br><br><br>
        </li>
        <li>
            第4个文档<br><br><br><br><br><br>
        </li>
        <li>
            第5个文档<br><br><br><br><br><br>
        </li>
        <li>
            第6个文档<br><br><br><br><br><br>
        </li>
        <li>
            第7个文档<br><br><br><br><br><br>
        </li>
        <li>
            第8个文档<br><br><br><br><br><br>
        </li>
    </ul>
    <ul class="list">
        <li>
            第1个文档<br><br><br><br><br><br>
        </li>
        <li>
            第2个文档<br><br><br><br><br><br>
        </li>
        <li>
            第3个文档<br><br><br><br><br><br>
        </li>
        <li>
            第4个文档<br><br><br><br><br><br>
        </li>
        <li>
            第5个文档<br><br><br><br><br><br>
        </li>
        <li>
            第6个文档<br><br><br><br><br><br>
        </li>
        <li>
            第7个文档<br><br><br><br><br><br>
        </li>
        <li>
            第8个文档<br><br><br><br><br><br>
        </li>
    </ul>
    <ul class="list">
        <li>
            第1个文档<br><br><br><br><br><br>
        </li>
        <li>
            第2个文档<br><br><br><br><br><br>
        </li>
        <li>
            第3个文档<br><br><br><br><br><br>
        </li>
        <li>
            第4个文档<br><br><br><br><br><br>
        </li>
        <li>
            第5个文档<br><br><br><br><br><br>
        </li>
        <li>
            第6个文档<br><br><br><br><br><br>
        </li>
        <li>
            第7个文档<br><br><br><br><br><br>
        </li>
        <li>
            第8个文档<br><br><br><br><br><br>
        </li>
    </ul>
    <ul class="list">
        <li>
            第1个文档<br><br><br><br><br><br>
        </li>
        <li>
            第2个文档<br><br><br><br><br><br>
        </li>
        <li>
            第3个文档<br><br><br><br><br><br>
        </li>
        <li>
            第4个文档<br><br><br><br><br><br>
        </li>
        <li>
            第5个文档<br><br><br><br><br><br>
        </li>
        <li>
            第6个文档<br><br><br><br><br><br>
        </li>
        <li>
            第7个文档<br><br><br><br><br><br>
        </li>
        <li>
            第8个文档<br><br><br><br><br><br>
        </li>
    </ul>
    <ul class="list">
        <li>
            第1个文档<br><br><br><br><br><br>
        </li>
        <li>
            第2个文档<br><br><br><br><br><br>
        </li>
        <li>
            第3个文档<br><br><br><br><br><br>
        </li>
        <li>
            第4个文档<br><br><br><br><br><br>
        </li>
        <li>
            第5个文档<br><br><br><br><br><br>
        </li>
        <li>
            第6个文档<br><br><br><br><br><br>
        </li>
        <li>
            第7个文档<br><br><br><br><br><br>
        </li>
        <li>
            第8个文档<br><br><br><br><br><br>
        </li>
    </ul>
</body>
</html>

 

转载于:https://www.cnblogs.com/jrri/p/11347622.html

weixin_30315905
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
window resize和scroll事件的基本优化思路
12-10
同事在项目中使用scroll事件去加载数据，结果IE下悲剧了。给了一个简单优化方法，效果明显。 只要用户改变窗口大小，会对内部一些元素大小重新计算，可能导致整个页面重新渲染，最终导致大量消耗 CPU。比如调用 resize 方法，用户改变窗口大小时会不停的被触发， 低版本的IE 会可能陷入假死状态。window的scroll事件也是如此，鼠标滚动或拖动滚动条，就会不停的触发scroll事件，如果处理的东西多，低版本的IE也会陷入假死状态。 基本的优化思路：在一定的时间之内，只执行一次resize事件函数。 代码如下: var resizeTimer = null; $[removed](
js resize、scroll函数节流与函数防抖
勇敢的豆沙包
09-19 6270
resize和scroll方法会触发时频繁调用，致使页面产生性能问题，所以我们使用函数节流和函数防抖来解决函数防抖//scroll方法中的do somthing至少间隔500毫秒执行一次 window.addEventListener('scroll',function(){ var timer;//使用闭包，缓存变量 return function(){ if(ti
window resize和scroll事件的基本优化
weixin_30245867的博客
08-16 221
转自 http://www.kankanews.com/ICkengine/archives/6564.shtml 转载于:https://www.cnblogs.com/wybie/p/3916298.html
OpenCV3.4.1resize函数未定义
u012581284的博客
08-31 2427
添加#include
用jQuery监听浏览器窗口的变化
weixin_33901843的博客
07-12 444
$(window).resize(function () { //当浏览器大小变化时 alert($(window).height()); //浏览器时下窗口可视区域高度 alert($(document).height()); //浏览器时下窗口文档的高度 alert($(document.body).height());...
jQuery实现冻结表格行和列
10-24
《jQuery实现冻结表格行和列》 在网页开发中，有时我们需要处理大量的表格数据，为了提供更好的用户体验，可能会有需求将表格的头部（行或列）固定，即使在滚动时也始终保持可见。这个功能在大型数据表格中尤为常见...
JQuery的ON()方法支持的所有事件罗列
10-24
这个方法自jQuery 1.7版本引入，目的是替代之前的`bind()`, `live()`, `delegate()`等事件处理方法，以提供更强大的功能和更好的性能。`on()`方法不仅能够绑定当前存在的元素，还能绑定未来动态添加到DOM中的元素，...
jquery-resize-meteor:用于 jquery 调整大小的 Meteor Wrapper
06-06
它在大多数浏览器上使用scroll事件，在 IE10 及更低版本上使用。 所使用的方法不仅可以检测 javascript 生成的调整大小更改，还可以检测由 CSS 伪类（例如：悬停、CSS 动画等）所做的更改。 关于图书馆 我正在寻找...
jQuery scroll结束事件和resize结束事件
黄大仙儿的专栏
07-14 8712
通过设置timeout，判断滚动事件和resize事件的结束 scroll end事件 $.fn.scrollEnd = function(callback, timeout) { $(this).scroll(function(){ var $this = $(this); if ($this.data('scrollTimeout')) {
window resize和scroll事件性能优化
frontend_frank的博客
05-21 1204
只要用户改变窗口大小，会对内部一些元素大小重新计算，可能导致整个页面重新渲染，最终导致大量消耗 CPU。比如调用 resize 方法，用户改变窗口大小时会不停的被触发， ...
jquery事件-resize()方法
Benjamin
06-08 5406
监听窗口缩放事件以便对于当前对象构造大小。JQuery提供了resize事件，在每一个匹配元素的resize事件中绑定一个处理函数，比如适应窗口大小、对齐等等，当文档窗口改变大小时触发 这里有两种监听方式，一种是浏览器窗口的监听，一种是对象缩放比例的监听（是通过点击状态栏的缩放比例实现的） 对于窗口的监听：   $(window).resize(function(){ resiz
window.onresize与$(window).resize()
热门推荐
淡定如斯的博客
11-29 6万+
window.onresize 是直接给window的onresize属性绑定事件，只能有一个。也就是说后面的会覆盖前面。例如：window.onresize = function(){ console.log("1") } window.onresize = function(){ console.log("2") }当浏览器窗口大小发生改变时，控制台只会打印 2。
javascript事件基础--窗口重置（resize事件）和页面滚动（scroll事件）
wenmin1987的博客
03-26 1328
浏览器窗口重置时触发（调整窗口大小，最大化，最小化）：resize <body> <div id="box"></div> <script type="text/javascript"> var box=document.getElementById("box"); ...
JS都有哪些操作数组的方法
最新发布
ggq53219的博客
09-04 290
JavaScript 中操作数组的方法非常丰富，这些方法大致可以分为几类：创建和初始化数组、添加元素、删除元素、遍历数组、搜索元素、数组排序、数组映射和过滤等。
Vue的状态管理——Vuex3&4&Pinia
警警的博客
08-30 2495
Pinia是Vue.js 3.x的状态管理库，它可以看作是Vuex的升级版，旨在提供一种更简单、更直观的方式来管理Vue.js应用程序的状态。Vuex 4是Vue.js 3.x版本的状态管理库，它在Vuex 3的基础上进行了多项改进和优化，使其更加适用于大型应用和复杂场景。Vuex 3是Vue.js 2.x版本的状态管理库，它提供了一种集中式存储和管理组件状态的方式。：在 Vue 3 项目中，你通常会使用 Vuex 4 或 Pinia 而不是 Vuex 3。在 Vue 3 项目中，你可能会在。
从面向对象(OOP)到面向切面(AOP)：编程范式的演变
妍思码匠的博客
08-30 1365
本文深入探讨了面向切面编程（AOP）在前端开发中的应用，解释了AOP如何通过动态增强与代码复用、降低模块间耦合度，为前端项目带来更高效、更模块化的解决方案。通过具体案例分析，如日志记录切面和动态埋点的实现，展示了如何利用装饰器模式、高阶组件等技术在前端实现AOP。理解AOP的原理与实践，将有助于开发者构建更易于维护和扩展的前端应用。无论你是前端新手还是资深开发者，本文都将为你提供有价值的见解和实用技巧。
vue3使用-watch监听总结
weixin_44072254的博客
09-01 472
{deep: true, immediate: true, flush: 'post'}：deep是深度监听；flush:如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'，sync'创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发；flush: 'post'， 如果想在侦听器回调中能访问被 Vue 更新之后的所属组件的 DOM就用'post'flush: sync'，创建一个同步触发的侦听器，它会在 Vue 进行任何更新之前触发。监听数组的方式-示例。
jQuery常用事件处理方法
05-24
以下是 jQuery 常用的事件处理方法： 1. click()：当元素被点击时触发。 2. dblclick()：当元素被双击时触发。 3. focus()：当元素获得焦点时触发。 4. blur()：当元素失去焦点时触发。 5. mouseover()：当鼠标...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值