如何让一个图像调整大小与光标在中间使用css

How to let an image resize with the cursor in the middle using css?

本文关键字：光标 在中间 css 调整 图像 一个      更新时间：2023-09-26

我使用拖放功能，当我将图像拖到另一个div时，它会调整图像的大小，参见下面的代码。但是相对于原始图像，它会调整左上角的大小，所以光标和图像在不同的位置，这对用户来说很困惑。是否有一种方法可以让图像调整大小并保持相对于光标的位置，或者将光标置于图像的中间?

这是我现在使用的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;

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

 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);
 }
相关文章：