图片跟随鼠标移动

最新推荐文章于 2024-10-30 22:25:38 发布

蓝鲸是鱼

最新推荐文章于 2024-10-30 22:25:38 发布

阅读量286

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.youkuaiyun.com/qq_25367937/article/details/106044834

版权

这篇博客介绍了如何使用JavaScript实现图片跟随鼠标移动的功能，并加入了减速动画，使得图片移动过程更为平滑，详细讲解了通过事件对象获取鼠标坐标并动态定位图片的技巧。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        #pic {
            position: absolute;
            top: 0;
            left: 0;
        }
    </style>
</head>
<body>
    <img src="./images/walk.jpg" alt="" id="pic" width="200px">
</body>
</html>
<script>
    var pic = document.getElementById("pic");		// 获取图片元素
    var targetX = 0,targetY = 0;		// 目标位置的X坐标，Y坐标
    var leaderX = 0,leaderY = 0;	// 起始位置的X坐标，Y坐标
    var timer = null;	// 减速动画的定时器
    
    //鼠标点击时，图片移动至鼠标点击位置
    document.onclick = functio

最低0.47元/天解锁文章