跟随鼠标移动时背景放大不正确

Question

我创建了一个按钮，当您将鼠标悬停在它上面时，带有背景图像的div会放大。背景应跟随光标的移动。这意味着当您将鼠标悬停在按钮上时，背景图像会跟随光标。

当我将鼠标悬停在按钮的右下角时，图像将放大到左上角，然后移动到光标的位置。看看下面的例子，看看我的意思。我想让它直接缩放到光标的位置，有什么想法吗？

var imgZoomIn = 1.2; //% of how much the image will enlarge
function buttonImgResize(x, e){
    //Location of the cursor (as percentage of the container's size)
    var imgContPosition = x.getBoundingClientRect();
    var mousePosX = (e.clientX - imgContPosition.left) / x.offsetWidth;
    var mousePosY = (e.clientY - imgContPosition.top) / x.offsetHeight;
    
    //Finding how far to move the image from top and left
    var leftImgOverlap = x.offsetWidth * (imgZoomIn - 1) * mousePosX;
    var topImgOverlap = x.offsetHeight * (imgZoomIn - 1) * mousePosY;
    
    //implementing changes
    x.firstElementChild.style.left = 0 - leftImgOverlap + "px";
    x.firstElementChild.style.top = 0 - topImgOverlap + "px";
}
//Reseting values
function buttonImgDownsize(x){
    x.firstElementChild.style.left = "0";
    x.firstElementChild.style.top = "0";
}

/*Container*/
.showCaseBtn{
    overflow: hidden;
    position: relative;
    width: 500px; height: 300px;
}
/*div with background image*/
.showcaseBtn_Back{
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: black no-repeat center center / cover;
    transition: 0.4s;
}
.showCaseBtn:hover .showcaseBtn_Back{
    height: 120%; width: 120%;
}

<div class="showCaseBtn" onmousemove="buttonImgResize(this, event)" onmouseout="buttonImgDownsize(this)">
  <div class="showcaseBtn_Back" style="background-image: url(https://media.contentapi.ea.com/content/dam/need-for-speed/common/2017/10/nfs-payback-jaguar-f-type-2x.jpg.adapt.1920w.jpg);"></div>
</div>

Answer 1

该问题是由 css 转换引起的。如果删除它，缩放有效，但不会发生花哨的缩放。

var imgZoomIn = 1.2;
function buttonImgResize(x, e){
    var imgContPosition = x.getBoundingClientRect();
    var mousePosX = (e.clientX - imgContPosition.left) / imgContPosition.width;
    var mousePosY = (e.clientY - imgContPosition.top) / imgContPosition.height;
    
    var leftImgOverlap = imgContPosition.width * (imgZoomIn - 1) * mousePosX;
    var topImgOverlap = imgContPosition.height * (imgZoomIn - 1) * mousePosY;
    
    
    x.firstElementChild.style.left = - leftImgOverlap + "px";
    x.firstElementChild.style.top =  - topImgOverlap + "px";
}
function buttonImgDownsize(x){
    x.firstElementChild.style.left = "0";
    x.firstElementChild.style.top = "0";
}

.showCaseBtn{
    overflow: hidden;
    position: relative;
    width: 500px; height: 300px;
}
.showcaseBtn_Back{
    position: absolute; top: 0; left: 0;
    width: 100%; height: 100%;
    background: black no-repeat center center / cover;
}
.showCaseBtn:hover .showcaseBtn_Back{
    height: 120%; width: 120%;
}

<div class="showCaseBtn" onmousemove="buttonImgResize(this, event)" onmouseout="buttonImgDownsize(this)">
  <div class="showcaseBtn_Back" style="background-image: url(https://media.contentapi.ea.com/content/dam/need-for-speed/common/2017/10/nfs-payback-jaguar-f-type-2x.jpg.adapt.1920w.jpg);"></div>
</div>