jQuery实现图片跟着鼠标移动的效果

最新推荐文章于 2021-07-27 15:44:46 发布

hemingyang97

最新推荐文章于 2021-07-27 15:44:46 发布

阅读量5.1k

点赞数 4

分类专栏： jQuery 文章标签：鼠标图片

本文链接：https://blog.csdn.net/hemingyang97/article/details/80903320

版权

jQuery 专栏收录该内容

25 篇文章 1 订阅

订阅专栏

例子：

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
	<meta charset="utf-8" />
    <script src="Scripts/jquery-1.11.3.js"></script>
   
    <script>
        //文档准备就绪函数
        $(function () {
            //图片跟着鼠标移动的效果  
           // 当鼠标指针在指定的元素中移动时，就会发生 mousemove 事件。
            $(document).mousemove(function(e)  
            {
                //获取图片所在的位置，使用css设置相对位置（ "position": "absolute"）
                //鼠标相对于文档的左边缘的位置（"left": e.pageX ）
                //鼠标相对于文档的左边缘的位置（ "top": e.pageY ）
                $("#mouseXY").css({ "position": "absolute", "left": e.pageX , "top": e.pageY });
            });  
        });
    </script>
</head>
<body>
    <div id='mouseXY'><img src="8.png" /></div>
</body>
</html>