使用JavaScript进行鼠标悬停移动

我试图实现（使用webflow构建）在元素上悬停时的动画和交互，但无法实现。我在这里找到了，但当我试图用悬停函数重构它时，我仍然无法使它工作

这是我试过的

// Maximum offset for image
        var maxDeltaX = 50,
            maxDeltaY = 50,
            viewportWidth = 0,
            viewportHeight = 0,
            mouseX = 0,
            mouseY = 0,
            translateX = 0,
            translateY = 0;
        // Bind mousemove event to document
        jQuery('.image-content-right').on('mousemove', function(e) {
            // Get viewport dimensions
            viewportWidth = document.documentElement.clientWidth,
                viewportHeight = document.documentElement.clientHeight;
            // Get relative mouse positions to viewport
            // Original range: [0, 1]
            // Should be in the range of -1 to 1, since we want to move left/right
            // Transform by multipling by 2 and minus 1
            // Output range: [-1, 1]
            mouseX = e.pageX / viewportWidth * 2 - 1,
            mouseY = e.pageY / viewportHeight * 2 - 1;
            // Calculate how much to transform the image
            translateX = mouseX * maxDeltaX,
            translateY = mouseY * maxDeltaY;
            jQuery('.cyan').css('transform', 'translate(' + translateX + 'px, ' + translateY + 'px)');
            jQuery('.small-cyan').css('transform', 'translate(' + translateX + 'px, ' + translateY + 'px)');
            jQuery('.small-darktangirine').css('transform', 'translate(' + translateX + 'px, ' + translateY + 'px)');
        }).hover(function() {
            jQuery('.cyan').css('transform', 'translate(' + translateX + 'px, ' + translateY + 'px)');
            jQuery('.small-cyan').css('transform', 'translate(' + translateX + 'px, ' + translateY + 'px)');
            jQuery('.small-darktangirine').css('transform', 'translate(' + translateX + 'px, ' + translateY + 'px)');
        })

---

它有点笨重，没有我想要实现的那么平滑，而且我希望它在不悬停时返回到其原始位置。

我不太确定，考虑到它实际上取决于jQuery本身执行其事件的频率，您将如何做更多的工作来使该函数更加平滑。现在，也许我会考虑把JQuery事件声明中的所有代码分割成它们各自的函数。这将使您的工作更轻松、更干净：）

使其返回到您在保存每个元素的原始未翻译位置之前的位置，或者，您可以将每个翻译保存到计数变量中，然后在元素未聚焦后“撤消”翻译

比如：

---

考虑到jQuery本身执行其事件的频率，我不太确定您将如何做更多的工作来使该函数更加平滑。现在，也许我会考虑把JQuery事件声明中的所有代码分割成它们各自的函数。这将使您的工作更轻松、更干净：）

使其返回到您在保存每个元素的原始未翻译位置之前的位置，或者，您可以将每个翻译保存到计数变量中，然后在元素未聚焦后“撤消”翻译

比如：

---

通过webflow的外观和感觉（如果我正确理解了您的目标），您希望能够在悬停区域内以最大延迟/Y的速度移动对象。如果是这样的话，您的数学需要一些调整：您需要定义一个原点（最有可能是移动对象的中心），并将原点周围的悬停区域规格化为[-1，1]。将对象放置在悬停框的死点可以简化计算。我在一个片段中发布了代码，但它应该在整个页面上运行，因为坐标计算不正确。有趣的是，如果我在上运行它，它在Chrome上会像预期的那样工作，但在Safari上不会。为了避免这个问题，您应该将所有内容包装在父div中，并计算相对于父div的坐标

const page=document.getElementById（“页面id”）；
const area=document.getElementById（“区域id”）；
const-box=document.getElementById（“框id”）；
//我们想把物体最多移动50像素
常量maxDeltaX=50；
常数maxDeltaY=50；
让pageBox=page.getBoundingClientRect（）；
让pageTopLeft={
x:pageBox.x，
y:pageBox.y
};
设areaBox=area.getBoundingClientRect（）；
让区域范围={
w:areaBox.width/2.0，
h:areaBox.height/2.0
};
设boxBox=box.getBoundingClientRect（）；
设原点={
x:boxBox.x+（boxBox.width/2.0），
y:boxBox.y+（boxBox.height/2.0）
};
//乘数允许悬停区域范围内的完全增量位移
设multX=maxDeltaX/areaRange.w；
设multY=maxDeltaY/areaRange.h；
area.addEventListener（“mousemove”，onMove）；
区域。添加的事件列表（“mouseleave”，onLeave）；
addEventListener（“resize”，onResize）；
//鼠标坐标是从包装器的左上角计算出来的，它们与对象中心的距离是标准化的
函数onMove（e）{
设dx=（（e.clientX-pageTopLeft.x）-transformOrigin.x））；
设dy=（（e.clientY-pageTopLeft.y）-transformOrigin.y））；
box.style.transform=“translate3d”（+（dx*multX）+“px”，+（dy*multY）+“px，0）”；
/*
//或者你也可以添加一些奇特的旋转，哈哈
让旋转度=数学atan2（dy，dx）*（180/数学π）；
让rotationString=“旋转（“+rotationDeg+”deg）”；
box.style.transform=“translate3d”（+（dx*multX）+“px”，+（dy*multY）+“px，0）”+旋转字符串；
*/
}
函数onLeave（e）{
box.style.transform=“translate3d（0,0,0）”；
}
函数onResize（e）{
//重新定义所有“let”变量
}

*{
保证金：0；
填充：0；
}
.第页{
位置：相对位置；
宽度：100%；
高度：100vh；
背景色：#ddd；
显示：网格；
放置项目：中心；
}
.悬停区{
位置：相对位置；
宽度：50%；
身高：100%；
背景色：#888；
}
.盒子{
位置：绝对位置；
左：计算（50%-25px）；
顶部：calc（50%-25px）；
宽度：50px；
高度：50px；
边界半径：25px；
背景图像：线性梯度（45度，#000，#aaa）；
变换：translate3d（0,0,0）；
过渡：均为0.2s；
改变：转变；
}

---

根据webflow的外观和感觉（如果我正确理解了您的目标），您希望能够在悬停区域内以最大速度/Y移动您的对象。如果是这样的话，您的数学需要一些调整：您需要定义一个原点（最有可能是移动对象的中心），并将原点周围的悬停区域规格化为[-1，1]。将对象放置在悬停框的死点可以简化计算。我在一个片段中发布了代码，但它应该在整个页面上运行，因为坐标计算不正确。有趣的是，如果我在上运行它，它在Chrome上会像预期的那样工作，但在Safari上不会。为了避免这个问题，您应该将所有内容包装在父div中，并计算相对于父div的坐标

const page=document.getElementById（“页面id”）；
const area=document.getElementById（“区域id”）；
const-box=document.getElementById（“框id”）；
//我们想把物体最多移动50像素
常量maxDeltaX=50；
常数maxDeltaY=50；
让pageBox=page.getBoundingClientRect（）；
让pageTopLeft={
x:pageBox.x，
y:pageBox.y
};
设areaBox=area.getBoundingClientRect（）；
让区域范围={
w:areaBox.width/2.0，
h:areaBox.height/2
function animateElementOnMouseMove() {
   // your translate code
}
function animateElementOnMouseHover() {
   // your initial hover animation code
}
$('.image-content-right').on('mousemove', animateElementOnMouseMove)
                         .on('hover', animateElementOnMouseHover);


var elementTranslateCountX = 0;
var elementTranslateCountY = 0;

// ON TRANSLATE
elementTranslateCountX += translateX;
elementTranslateCountY += translateY;