zoukankan      html  css  js  c++  java
  • js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    js进阶 12-6 监听鼠标滚动事件和窗口改变事件怎么写

    一、总结

    一句话总结:滚动事件scroll(),浏览器窗口调整监听resize(),思考好监听对象。

    1、滚动事件scroll()的监听对象是谁?

    window对象

            $(window).scroll(function(){
                //滚动条的距离scrollTop()和scrollLeft()
                $('#div1').text($(this).scrollTop())
            })

    2、浏览器窗口调整监听resize()的监听对象是谁?

    window对象

            $(window).resize(function(){
                alert('窗口大小改变了')
            })

    3、如何监听窗口滚动?

    scroll函数

            $(window).scroll(function(){
                //滚动条的距离scrollTop()和scrollLeft()
                $('#div1').text($(this).scrollTop())
            })

    4、如何监听窗口改变?

    resize函数

            $(window).resize(function(){
                alert('窗口大小改变了')
            })

    二、监听鼠标滚动事件和窗口改变事件怎么写

    1、相关知识

    • scroll() 当用户滚动滚动条时会发生 scroll 事件
    • resize() 当调整浏览器窗口的大小时,发生 resize 事件。
     

    2、代码

    <!DOCTYPE html>
    <html lang="en">
    <style>
    </style>
    <head>
        <meta charset="UTF-8">
        <title>演示文档</title>
        <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
        <style type="text/css">
        body{height: 3000px}
        div{width: 150px;height: 100px;border:1px solid orange;position: fixed;left:150px;}
        p{width: 50px;height:50px;background: green}
          </style>
    </style>
    </head>
    <body>
    <h3>jQuery事件对象</h3>
    <div id="div1"><p></p></div>
    <input id="btn1" type="button" value="事件对象">
    <script type="text/javascript">
        $(function(){
            $(window).scroll(function(){
                //滚动条的距离scrollTop()和scrollLeft()
                $('#div1').text($(this).scrollTop())
            })
            $(window).resize(function(){
                alert('窗口大小改变了')
            })
        })
    </script>
    </body>
    </html>
     
  • 相关阅读:
    python库安装
    Reversing Linked List(根据输入序列对其做部分或全部反转)
    简单的一元二项(使用的是指针形式,方便调试)
    最大子序列问题
    centos6安装mysql5.5.53
    android中常用的drawable
    android四大组件之ContentProvider
    android使用shape来绘制控件
    android布局理解
    android命令行管理avd以及sqlite3命令
  • 原文地址:https://www.cnblogs.com/Renyi-Fan/p/9270113.html
Copyright © 2011-2022 走看看