Javascript 如何使HTML元素对鼠标移动作出反应？

我的问题是如何根据鼠标移动向HTML元素的x-y轴添加特定的移动

查看此处的站点并滚动至第二张幻灯片：

---

我怎样才能达到这样的效果

如果要编写库免费版本，则需要从以下内容开始：

学习DOM操作

var myEl = document.querySelector("#my-el");

学习

.style

界面

myEl.style.position = "absolute";

myEl.style.left = 10 + "px";

学习CSS属性、它们的值以及如何从

样式

界面读取/使用它们

myEl.style.position = "absolute";

myEl.style.left = 10 + "px";

您至少需要了解以下CSS属性：

“显示”
“位置”
“顶部”
“左”
“z指数”

了解如何在JS中正确解析字符串中的数字。
…这并不重要，使用鼠标，
但非常重要的是，使用DOM

了解如何编写事件处理程序

window.addEventListener("mousemove", function (evt) {/*mousemove event object*/});

了解事件对象的属性（特别是重要的事件类型，如鼠标、键盘、触摸）

了解如何在浏览器无法为您执行操作时，基于理想的帧速率管理事件并控制操作的数量/频率

了解如何以跨浏览器、IE8+的方式实现所有这些事情

---

学习一点线性代数（老实说，学习足够多的线性代数来理解反转轴比例视差比6级几何要难一点。

你只需要CSS就可以得到类似的效果，不需要JS

你可以在这里看到一个例子：Román Cortés。在他的博客中，还有

基本上，您必须将目标元素拆分为小元素，悬停时，根据三角计算设置不同背景层的位置

根据他的解释,

有80个垂直悬停元素，每个元素5*455像素，覆盖 全部效果。每个悬停元素都包含要定义的内部元素 每层位置、背景图像和侧面背景 当悬停元素未激活时（没有鼠标悬停） 它），显示隐藏图像的所有内部元素，显示： 没有

当悬停元素处于活动状态时，图像设置为显示： 块，并设置这些位置。这些位置已 计算并在CSS代码中为每个层和每个 80个垂直悬停元素。这就是魔法的作用

---

通过学习javascript，您将获得这样的启示，即您实际上能够在观看屏幕时移动屏幕上的一个元素！这包含了很多问题。从小的原型开始，首先了解如何跟踪鼠标并从那里开始构建。对于这些问题的完整答案就是从大到小r SO格式。您可以从学习JavaScript中的

事件开始。有趣的是，github 404页面也有类似的效果。@adeneo有史以来最好的配置文件！！！