Javascript jQuery-在mousemove上调整图像大小

我正在开发一个应用程序，它允许您放大和缩小图像，如果图像被放大，还可以平移图像。您可以在上查看它的操作

在应用程序开发过程中，我遇到了一个无法解决的问题：

要放大/缩小，请在地图上按鼠标左键，然后向上或向下拖动光标。几乎是一种“点击并拖动”的行为。其思想是存储指针的初始坐标（当按下鼠标按钮时），然后在每个鼠标移动上，根据光标覆盖的距离为图像指定一个新的大小（以像素为单位）。 我遇到的问题是，在我按下鼠标按钮并开始拖动光标后，地图会突然移动。它会冻结一点，然后调整大小，然后再次冻结…它会这样做几秒钟，然后表现正常。虽然在某个时候，它可以再次做到这一切

如果有人对为什么会发生这种情况以及如何解决问题有任何想法，如果您能与我分享，我将不胜感激

致以最良好的祝愿，

---

Andrei

尝试在调整图像大小之前停止图像上的动画。

---

您还可以使用jqueryui来调整图像的大小

我不知道你的代码是什么，但你可以测试它，也许可以解决你的问题

<form id="form1" runat="server">
 <div align="center">
  <fieldset style="width:450px;height:320px;">
   <table border="0" cellpadding="3" cellspacing="3">
    <tr><td colspan="2" class="header">MOUSEOVER TO ZOOM
     IMAGE</td></tr>
    <tr><td colspan="2"></td></tr>
    <tr>
     <td colspan="2">
      <div class="imgcontainer">
       <asp:Image ID="Image1" CssClass="image"
        ImageUrl="~/images/Image8.jpg" runat="server" />
      </div>
     </td>
    </tr>
   </table>
  </fieldset>
 </div>
</form>

<script language="javascript" type="text/javascript">
$(document).ready(function() {
var zoom = 1.1;
var move = -20;
$("#Image1").hover(
function() {
var imgwidth = $("#Image1").width() * zoom;
var imgheight = $("#Image1").height() * zoom;
$(this).animate({ 'width': imgwidth, 'height':
imgheight, 'top': move, 'left': move }, { duration: 200 });
},
function() {
//Reset the image
$(this).animate({ 'width': $(".imgcontainer").width(),
'height': $(".imgcontainer").height(), 'top': '0', 'left': '0' }, {
duration: 100 });
});
});
</script>

鼠标悬停缩放
形象
$（文档）.ready（函数（）{
var zoom=1.1；
var-move=-20；
$（“#图像1”）。悬停(
函数（）{
var imgwidth=$（“#Image1”）.width（）*缩放；
var imgheight=$（“#Image1”）.height（）*缩放；
$（this）.animate（{'width'：imgwidth，'height'）：
imgheight，'top'：move，'left'：move}，{duration:200}）；
},
函数（）{
//重置图像
$（this）.animate（{'width'：$（“.imgcontainer”）.width（），
'height'：$（“.imgcontainer”）.height（），'top'：'0'，'left'：'0'}{
持续时间：100}）；
});
});

顺便说一下，图像是通过标签输入的。此外，这种行为在Chrome和Firefox中都是可见的（至少）。你能在这里共享你的代码吗？例如，引起问题的jQuery/JavaScript代码。也许最好能全部看到：。图像的大小不是通过设置尺寸动画来调整的。仅通过直接更改高度和宽度。在这种情况下，由于一些限制，jQueryUI不是我的解决方案。还有一些css可以设置宽度和高度