jQuery - изменить размер изображения при перемещении мыши - PullRequest
Новая
       3

jQuery - изменить размер изображения при перемещении мыши

0 голосов
/ 10 марта 2012

Я работаю над приложением, которое позволяет вам увеличивать и уменьшать изображение, а также панорамировать его, если оно увеличено. Вы можете просмотреть его в действии на http://picselbocs.com/projects/helsinki-map-application.

Во время разработки приложения я столкнулся с проблемой, которую не могу понять и исправить:

Для увеличения / уменьшения масштаба вы нажимаете левую кнопку мыши на карте, а затем перетаскиваете курсор вверх или вниз.В значительной степени поведение "щелкни и перетащи".Идея состоит в том, чтобы сохранить начальные координаты указателя (при нажатии кнопки мыши), а затем при каждом перемещении мыши присвоить изображению новый размер (в пикселях) на основе расстояния, пройденного курсором.Проблема, с которой я столкнулся, заключается в том, что сразу после нажатия кнопки мыши и начала перетаскивания курсора карта движется рывками.Он немного зависает, затем изменяет размер, затем снова зависает ... Он делает это в течение нескольких секунд, затем ведет себя нормально.Хотя в какой-то момент он может сделать все это снова.

Если у кого-нибудь есть идеи относительно того, почему это происходит и как решить проблему, я был бы очень признателен, если бы вы поделились ими со мной.

С наилучшими пожеланиями, Андрей

Ответы [ 2 ]

0 голосов
/ 10 марта 2012

Я не знаю, каков ваш код, но вы можете проверить его, возможно, решить вашу проблему 

<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>
0 голосов
/ 10 марта 2012

Попробуйте остановить анимацию на изображении, прежде чем изменять его размер.Вы также можете использовать jquery ui, чтобы изменить размер изображения.

...