天使降临到我身边【节流阀案例之鼠标跟随效果】

最新推荐文章于 2024-04-26 06:37:48 发布

代森森

最新推荐文章于 2024-04-26 06:37:48 发布

阅读量123

点赞数 3

分类专栏：案例向文章标签： javascript 前端 jquery

本文链接：https://blog.csdn.net/ovocc/article/details/124417269

版权

jQuery 鼠标跟随 CSS定位事件监听节流技术

关键词由CSDN通过智能技术生成

案例向专栏收录该内容

15 篇文章 1 订阅

订阅专栏

效果：
请添加图片描述

代码：

 <img src="angel.gif" alt="" id="angel">

html,
body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}

#angel {
    position: absolute;
}

 <script src="./lib/jquery.js"></script>
 <script>
        $(function() {
            // 1.获取图片
            var angel = $('#angel');

            var timer = null; // 步骤1：定义节流阀

            // 2.绑定mousemove事件
            $(document).on('mousemove', function(e) {
                // 步骤3：判断节流阀是否为空
                if (timer) {
                    return;
                } else {
                    // 步骤2：开启延时器
                    timer = setTimeout(function() {
                        $(angel).css('top', e.pageY + 'px').css('left', e.pageX + 'px');
                        console.log('ok');
                        timer = null;
                    }, 40);
                }
            });
        });
    </script>