javascript - JQuery - 将背景位置设置为鼠标移动的位置

Question

我正在尝试为 WordPress 网站制作自定义缩放功能。缩放功能有效，但我无法使其跟随我的鼠标 - 向光标放大。

我使用的方法很冗长，所以希望从一个简单的问题开始，给你们这些天才编码员。

如果我们需要更多代码 - 我可以轻松添加。

---

CSS

写了一个小片段，它将填充它的父级并允许我应用缩放样式 - 在鼠标悬停/移出时在 JQuery 中应用。

需要注意的是背景大小:封面，我正在尝试考虑解决这个问题。这样可以防止图像滑出位置-但是我觉得如果我想调整位置就不能用了？

无论如何这是 CSS:

.photo {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-repeat: no-repeat;
    transition: transform .5s ease-out;
}

JQuery

我已将包含我希望缩放的图像的锚定为目标。

附加一个容器以包含缩放图像。

使用 src 设置背景图像。

在鼠标悬停/移出时应用比例尺。

现在在鼠标移动时，我尝试像这样设置变换原点和背景位置:

//transform-origin
.on('mousemove', function(e){
    $(this).children('.photo').css({'transform-origin': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
            console.log('transform-origin should adjust');
})
//background-position
.on('mousemove', function(e){
    $(this).children('.photo').css({'background-position': ((e.pageX - $(this).offset().left) / $(this).width()) * 100 + '% ' + ((e.pageY - $(this).offset().top) / $(this).height()) * 100 +'%'});
    console.log('background-position should adjust');
})

这没有效果，无法弄清楚为什么 - 它与其他函数(控制台日志工作)相同 $(this).children('.photo') 并且当我处理它时数学是合乎逻辑的并且应该产生正确的数字。

我想我的问题是你能帮我弄清楚为什么这不能缩放到图像的正确区域吗？ background-size: cover 是否有变通办法？

我现在将构建一个 jsfiddle 或其他东西...

谢谢，杰森。

Answer 1

在创建 JSFiddle 时，我发现这是由于图像所在的 anchor 没有应用这些设置:

显示: block ；

position:relative；

溢出:隐藏；

如果您想在这里看到它的实际效果，它是:

jsfiddle.net/48od0axj/

这是我用来提供想法并根据我的目的进行操作的原件:

codepen.io/ccrch/pen/yyaraz

~请原谅外部链接...

谢谢，杰森。