javascript - 如何使用CSS让光标在中间调整图像大小？

Question

我使用拖放功能，当我将图像拖到另一个 div 时，它会调整图像的大小，请参见下面的代码。但它相对于原始图像调整到左 Angular ，因此光标和图像位于不同的位置，这让用户感到困惑。有没有办法让图像调整大小并保持相对于光标的位置，或者使图像居中，光标在中间？

这是我现在使用的 CSS 代码:

.Skin .PGR .DragAndDrop .stack div ul li.stack span label {
    width: 200px;
    height: 255px;
}
.Skin .PGR .DragAndDrop .stack div ul li.stack span label img {
    width: 200px;
    height: 255px;
    visibility: visible;
}
.Skin .PGR .DragAndDrop .stack .Group li.stack span.rank {
    visibility: hidden;
}
.Skin .PGR .DragAndDrop .stack div.Group ul li span img {
    width: 177px;

Answer 1

如果我明白你想做什么，像这样的事情应该行得通。基本上，您只需要获取鼠标坐标，然后将图像的位置设置为鼠标坐标减去宽度/高度的一半以使其居中。希望这对您有所帮助!

 window.onload = track;
 var mouseX, mouseY;
 function track() {
     if (window.Event) {
          document.captureEvents(Event.MOUSEMOVE);
     }
     document.onmousemove = getCursorXY;
  }

 function getCursorXY(e) {
     mouseX = (window.Event) ? e.pageX : event.clientX + (document.documentElement.scrollLeft ? document.documentElement.scrollLeft : document.body.scrollLeft);
     mouseY = (window.Event) ? e.pageY : event.clientY + (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
 }

 function updatePosition() {
      var img = document.getElementById('myimage'); 
      var width = img.clientWidth;
      var height = img.clientHeight;

      img.style.position = "absolute";
      img.style.top = mouseY-(height/2);
      img.style.left = mouseX-(width/2);
 }