首页 > 其他分享> 文章详细

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

2021-08-04 20:34:02 阅读：140 来源： 互联网

标签：滚动 log -- 标签 jq 对象 window 坐标 scrollTop

事件对象

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>

标签：滚动,log,--,标签,jq,对象,window,坐标,scrollTop
来源： https://blog.csdn.net/weixin_44519518/article/details/119392178

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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

事件对象

滚动对象