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

最新推荐文章于 2022-07-14 17:39:57 发布

风或许自媒体

最新推荐文章于 2022-07-14 17:39:57 发布

阅读量889

点赞数 1

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

本文链接：https://blog.csdn.net/LY_code/article/details/79978643

版权

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

摘要由CSDN通过智能技术生成

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

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

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

mousedown

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

mousemove

3.相应的mousedown就要有mouseup

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

源码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>缓动轨迹的f

关注

专栏目录