JQuery resize和scroll方法 

<!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>

 

posted @ 2019-08-13 18:06  Jrri  阅读(586)  评论(0)    收藏  举报