Question

我正在开发一个允许你放大和放大的应用程序。超出图像并在放大时平移它。您可以在http://picselbocs.com/projects/helsinki-map-application上查看它。

在应用程序开发期间，我遇到了一个我无法弄清楚并解决的问题：

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

如果有人对于为什么会发生这种情况以及解决问题有任何想法，如果你与我分享，我会非常感激。

祝福，安德烈

Answer 1

尝试在调整图像大小之前停止动画。您也可以使用jquery ui来调整图像大小。

Answer 2

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

<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>

jQuery - 在mousemove上调整图像大小

2 个答案: