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'）作为其他函数（控制台日志工作）和我通过它时的数学是合乎逻辑的，应该产生正确的数字。

我想我的问题是你可以帮我弄清楚为什么这不会缩放到图像的正确区域？是否有背景大小的工作：封面？

我现在要建立一个jsfiddle或者什么......

谢谢你，杰森。

Answer 1

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

显示：块;

位置：相对;

溢出：隐藏;

如果你想在这里看到它的作用，它是：

JS fiddle.net/48OD0A小姐/

这是我曾经给我的想法和操作为我的目的工作的原始：

code喷.IO/此次热潮/喷/由于AR AZ

〜原谅外部链接......

谢谢你，杰森。