jQuery - mousemove에서 이미지 크기 조정

& 이미지를 확대 할 수있는 응용 프로그램에서 작업 중이며 확대 한 경우에도 팬을 이동합니다. http://picselbocs.com/projects/helsinki-map-application에서 동작을 볼 수 있습니다.jQuery - mousemove에서 이미지 크기 조정

을,지도에서 마우스 왼쪽 버튼을 누르면/아웃 확대를 위해 다음 커서를 드래그 : 응용 프로그램의 개발 기간 동안

, 나는 내가 파악하고 해결할 수없는 문제에 달렸다 하위. 거의 "클릭 & 끌기"동작. 포인터의 초기 좌표 (마우스 버튼을 누를 때)를 저장 한 다음 각 mousemove에 커서를 놓은 거리를 기준으로 새 크기 (픽셀 단위)를 지정합니다. 내가 마주 친 문제는 마우스 버튼을 누른 후 커서를 드래그하면 맵이 갑자기 움직이는 것입니다. 잠시 멈췄다가 다시 크기를 조정 한 다음 다시 고정합니다 ... 몇 초 동안이 작업을 수행 한 다음 정상적으로 작동합니다. 어떤 시점에서이 모든 것을 다시 할 수는 있지만.

왜 이런 일이 발생했는지 문제를 해결하는 데 도움이되는 아이디어가 있으면 누구나 나와 공유하면 크게 감사하겠습니다.

행복을 빌며, 안드레이 크기를 조정하기 전에 이미지에 애니메이션을 중지

출처

2012-03-10 Andrei Oniga

를 해결을 테스트 할 수 있습니다, 이미지는 태그로 입력합니다. 또한이 동작은 Chrome과 Firefox 모두에서 볼 수 있습니다 (적어도). –

여기에서 코드를 공유 할 수 있습니까? 예 : 문제의 원인이되는 jQuery/JavaScript 코드 – ManseUK

http://picselbocs.com/projects/helsinki-map-application/script.js를 참조하십시오. –

보십시오. jquery UI를 사용하여 이미지 크기를 조정할 수도 있습니다.

출처

2012-03-10 11:55:20 Alytrem

크기가 움직이는 이미지의 크기가 조정되지 않습니다. 높이와 너비를 직접 변경하는 것만으로. 그리고 jQuery UI는 몇 가지 한계로 인해이 경우에 대한 해결책이 아닙니다. –

내가 코드 무엇인지 잘 모릅니다하지만 당신은 어쩌면 그런데 문제

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

출처

2012-03-10 13:09:10

너비와 높이를 설정하는 CSS가 있습니다. –

jQuery - mousemove에서 이미지 크기 조정

답변

관련 문제