前端学习笔记：jq第二天--事件对象、滚动对象

2024-02-05 16:32:34

事件对象

document是一个原生的对象。

client距离窗口原点的坐标

screen距离显示屏的坐标

page距离页面的坐标

获取标签的宽度获取标签.width()

<style>
            img{
                position: fixed;
            }
        </style>

    <body>
        <img src="01.jpg" class="sui" width="100px" alt="">
        <img src="02.jpg" class="gen" width="100px" alt="">
        <ul>
            <li>111</li>
            ……
            <li></li>
        </ul>

        <script src="js/jquery.min.js"></script>
        <script>
            // document是一个原生的对象
            // $(document).mousemove(function(e){
            //     // 窗口的宽度
            //     console.log($(window).width());
            //     // 窗口的高度
            //     console.log($(window).height());
            //     // e是一个事件对象

            //     // client距离窗口原点的坐标
            //     console.log('client'+e.clientY);
            //     // screen距离显示屏的坐标
            //     // console.log('screen'+e.screenX);
            //     // pageX距离页面的坐标
            //     console.log('page'+e.pageY);
            // })

            setInterval(function(){
                // 获取标签的宽度  获取标签.width()
                var x=Math.random()*($(window).width()-$('.sui').width());
                var y=Math.random()*($(window).height()-$('.sui').height());
                
                $('.sui').animate({left:x+'px',top:y+'px'})
            },100)

            $(document).mousemove(function(e){
                // e是一个形参，事件对象，在事件中内置的
                var x=e.clientX+10;
                var y=e.clientY+10;
                $('.gen').css('left',x+'px');
                $('.gen').css('top',y+'px');

            })

        </script>
    </body>

滚动对象

scrollTop滚动坐标

控制窗口滚动 $(window).scrollTop(0)

带有动画的控制窗口滚动选择器需要选择html,body

获取标签距离页面原点的坐标获取标签.offset().top

 <style>
            button{
                position: fixed;
                bottom:0px;
                right:100px
            }
           
        </style>
    </head>
    <body>
        <ul>
            <li></li>
          ……
            <li></li>
            <li class="one">jdlfjlsdjf</li>
          ……
            <li></li>
            <li></li>
        </ul>
        <button>回到顶部</button>
        <script src="js/jquery.min.js"></script>
        <script>
            $('button').click(function(){
                // 控制窗口滚动
                // $(window).scrollTop(0)
                // 带有动画的控制窗口滚动 选择器需要选择html,body
            
                // $('html,body').animate({'scrollTop':'200px'})
                // 获取标签距离页面原点的坐标  
                $('html,body').animate({'scrollTop':$('.one').offset().top})
            })
            // scroll标签滚动
            $(window).scroll(function(){
                // 获取滚动坐标值
                console.log($(window).scrollTop())
            })
        </script>
    </body>

码农公寓

事件对象

滚动对象

相关文章