Question

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

我使用的方法已经花了很长时间，所以希望从一个简单的问题开始，为您提供天才的编码器。

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

CSS

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

我要考虑解决的一件事情是background-size：cover。这样可以防止图像滑出位置-但是我想调整位置不能使用吗？

无论如何，这里是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时，我发现这是由于图像所在的锚点没有应用以下设置：

显示：阻止；

位置：相对；

溢出：隐藏；

如果您希望在此处看到它的实际效果，则为：

jsfiddle.net/48od0axj /

这是我用来给我构想并为达到目的而工作的原始作品：

codepen.io/ccrch/pen/yyaraz

〜请问外部链接...

谢谢杰森。

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

1 个答案: