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

最新推荐文章于 2025-07-29 13:53:39 发布

原创最新推荐文章于 2025-07-29 13:53:39 发布 · 201 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#javascript #前端 #jquery

收录于

案例向专栏收录该内容

15 篇文章

订阅专栏

这篇博客详细介绍了如何利用HTML、CSS和JavaScript（jQuery库）创建一个图片跟随鼠标移动的效果。通过设置元素定位、监听mousemove事件及应用节流技术，实现了平滑且高效的交互体验。

效果：
请添加图片描述

代码：

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