首页 > Web开发 > 详细

JQuery resize和scroll方法

时间:2019-08-13 19:20:09      阅读:51      评论:0      收藏:0      [点我收藏+]
<!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>

 

JQuery resize和scroll方法

原文:https://www.cnblogs.com/jrri/p/11347622.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!