如何在 Javascript 中调用背景图像 URL

Question

我在 Squarespace 中有一个部分，我通过自定义 CSS 设置了背景图像：

background-image:url('https://images.squarespace-cdn.com/content/v1/5f187409db749f75b4b70872/1595438345426-RJBC7YPJSV4XRBU4WSDM/ke17ZwdGBToddI8pDm48kLkXF2pIyv_F2eUT9F60jBl7gQa3H78H3Y0txjaiv_0fDoOvxcdMmMKkDsyUqMSsMWxHk725yiiHCCLfrh8O1z4YTzHvnKhyp6Da-NYroOW3ZGjoBKy3azqku80C789l0iyqMbMesKd95J-X4EagrgU9L3Sa3U8cogeb0tjXbfawd0urKshkc5MgdBeJmALQKw/Stocksy_txp024e1acdDSm200_OriginalDelivery_2897817.jpg');
background-repeat:no-repeat;

我正在尝试在所述背景图像上应用this hover distortion effect，并且需要调用/定位它，但我不知道该怎么做，因为我不是开发人员 - 我该怎么做？这是我到目前为止的 Javascript 代码：

var myAnimation = new hoverEffect({
    parent: document.querySelector('[data-section-id="5f1874b38304ad336775b4ec"].section-background'),
    image1: ???,
    image2: ???,
    displacementImage: 'https://homesteadmodern.com/assets/displacement.png'
});

更新

我设法使用parent: document.querySelector('[data-section-id="5f1874b38304ad336775b4ec"].page-section > div') 更具体地定位了 div，并设法在 image1 和 image2 中使用了实际的 URL，它们按预期显示为背景图像。现在唯一的问题是悬停不再起作用，即使当我取出> div 时它确实起作用（但这会导致图像出现在错误的位置）！有什么帮助吗？

Answer 1

您可以使用getComputedStyle() function 来做到这一点。

var parent = document.querySelector('[data-section-id="5f1874b38304ad336775b4ec"].section-background');
var bgImage = getComputedStyle(parent).getPropertyValue('background-image');

bgImage 的值是这样的：

url("https://images.squarespace-cdn.com/content/v1/5f187409db749f…ALQKw/Stocksy_txp024e1acdDSm200_OriginalDelivery_2897817.jpg")

这是您在 CSS 中输入的确切值。如果要获取网址，可以添加replace()函数，如this answer to a similar question建议的那样：

var bgImage = getComputedStyle(parent)
        .getPropertyValue('background-image')
        .slice(4, -1).replace(/"/g, "");

bgImage 现在的值将是：

https://images.squarespace-cdn.com/content/v1/5f187409db749f…ALQKw/Stocksy_txp024e1acdDSm200_OriginalDelivery_2897817.jpg

Answer 2

ETA：对于这个关于失真效果的特定教程，您似乎不需要实际调用函数。只需将新的 hoverEffect 分配给一个变量并包含 robin dela 库的悬停效果部分就足以激活效果。

您可以使用 JavaScript mouseover 和 mouseout 事件。

即parent 在哪里选择您的元素（并假设您可能希望在悬停时更改背景图像并在不再悬停时更改回来）：

const parent = document.querySelector("your HTML stuff here");

parent.addEventListener("mouseover", function(){
    parent.style.backgroundImage = "url('new-image-url')";
});

parent.addEventListener("mouseout", function(){
    parent.style.backgroundImage = "url('original-image-url')";
});

你也可以这样设置：

parent.onmouseover = function(){};
parent.onmouseout = function(){};

我的理解是，如果您只在元素上执行一个事件，那会很好。