原生JavaScript实现小球按原轨迹进行返回的案例

风或许自媒体

于 2018-04-17 18:16:00 发布

阅读量960

点赞数 1

CC 4.0 BY-SA版权

分类专栏：前端从入门到放弃文章标签：原轨迹返回原生JavaScript

本文链接：https://blog.youkuaiyun.com/LY_code/article/details/79978643

本文介绍如何利用原生JavaScript实现一个小球跟随鼠标移动，并在鼠标释放后沿原轨迹返回的效果。主要涉及鼠标点击事件、鼠标移动事件、鼠标释放事件的处理，以及通过数组保存小球运动路径。

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

实现效果：滑动小球，按住鼠标拉着小球，一直按着一直拉着，当松开鼠标时，让小球按原来的轨迹返回。

要实现这个效果要明白以下的步骤：

1.为元素设置鼠标点击的事件，只有鼠标往下点，小球才会移动，从而跟着鼠标移动

mousedown

2.为元素设置移动鼠标事件。

mousemove

3.相应的mousedown就要有mouseup

4.原轨迹用数组去存，就是存他的left值和top值。

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓动轨迹的fa小球</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        div {

最低0.47元/天解锁文章

200万优质内容无限畅学