Jquery随着鼠标飞的图片

鼠标跟随图片的动态效果实现

最新推荐文章于 2022-03-01 13:19:26 发布

原创最新推荐文章于 2022-03-01 13:19:26 发布 · 538 阅读

0 ·

CC 4.0 BY-SA版权

Jquery 专栏收录该内容

45 篇文章

订阅专栏

本文介绍如何使用JavaScript和HTML实现鼠标跟随图片的动态效果，通过监听mousemove事件并更新图片的位置，使得图片能够实时跟随鼠标移动。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../Scripts/jquery-1.4.1.min.js" type="text/javascript"></script>
    <script type="text/javascript">

/*在mousemove、click等事件的匿名响应函数中如果指定一个参数e，那么就可以从e读取发生事件时的一些信息，比如对
mousemove等鼠标事件来说，就可以读取e.pageX、e.pageY来获得发生事件时鼠标在页面的坐标。*/

        $(function () {//注意：要在下面的层里面加上样式style="position:absolute"，这样才可以改变元素横纵坐标，才能让图片才会跟着鼠标一块儿走
            $(document).mousemove(function (e) {//body只是元素的显示范围，而document是整个文档。
                $("#fly").css("left", e.pageX).css("top",e.pageY);//left和top都是css中的属性
            });
        });

    </script>

</head>

<body>

</body>
</html>