Question

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

在此处查看网站并滚动到第二张幻灯片： http://community.saucony.com/kinvara3/

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

Answer 1

如果您要编写无库版本，则需要从以下开始：

学习DOM操作。

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

了解<element>.style界面。

myEl.style.position = "absolute";

了解CSS属性，它们的值以及如何从style界面读取/使用它们。

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

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

“显示”
“位置”
“顶”
“左”
“z-index”

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

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

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

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

了解如何管理事件，并根据理想的帧率控制操作的数量/频率，当浏览器不为您执行此操作时。

了解如何以跨浏览器IE8 +方式实现所有这些功能。

学习一点线性代数（老实说，学习它足以理解倒轴缩放视差比6级几何更难一点。

Answer 2

你只能获得类似CSS的效果，不需要JS！

你可以在这里看到一个例子：Pure CSS 3D Meninas，RománCortés。在他的博客中，还有the explanation。

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

根据他的解释，

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

当悬停元素处于活动状态时，图像将设置为显示：   阻止，并设置这些位置。这些职位一直都是   计算并写入每个图层和每个图层的CSS代码中   80个垂直悬停元素。这就是魔术。

如何让HTML元素对鼠标移动做出反应？

2 个答案: