javascript로 이미지 이동기가 제대로 작동하지 않습니다.

크기가 큰 이미지 때문에 브라우저 창에서 스크롤 할 수있게 만들고 싶습니다. 스크롤링은 두 가지 방식으로 작동해야합니다. a) 스크롤 막대 및 b) 마우스 동작. 후자는 원하는 방향으로 이미지를 드래그하는 것처럼 작동해야합니다. 그래서 저는 스크립트를 만들어 그것을 이미지에 붙였습니다. 코드가 올바르게 보이지만 제대로 작동하지 않습니다. 이미지가 사라지거나 원하지 않는 위치로 점프하는 경우가 있습니다. 당신은javascript로 이미지 이동기가 제대로 작동하지 않습니다.

http://ardent.de/JS/

에서 스크립트를 호출 할 수 있으며 코드가 첨부되어 있습니다. 아무도 이미지가 점프 또는 사라지는 이유를 알고 있습니까? 나는 대답을 기쁘게 생각한다.

<html> 
     <head> 
     <meta charset="utf-8"> 
     </head>   
     <body> 
     <img src="schloss.jpg" id="image" /> 

     <script> 
     var div=document.getElementById('image'); 
     var iwidth,iheight,oldY,oldX,newX, newY; 
     var mouseisdown=false; 

     div.addEventListener('load', function() { 
     iwidth=this.naturalWidth; 
     iheight=this.naturalHeight; 
     }); 

     function getCoordinates(elem) { 
     var LeftPos = elem.offsetLeft; 
     var TopPos = elem.offsetTop; 
     return {X:LeftPos,Y:TopPos}; 
     } 

     function addListeners() { 
     div.addEventListener('mousedown', mouseDown, false); 
     div.addEventListener('mouseup', mouseUp, false); 
     window.addEventListener('mousemove', divMove, false); 
     var p=getCoordinates(div);oldX = p.X;oldY = p.Y; 
     } 

     function mouseUp() { 
     mouseisdown=false; 
     } 

     function mouseDown() { 
     mouseisdown=true; 
     } 

     function divMove(e){ 
     if (mouseisdown) { 
     div.style.position = 'absolute'; 
     newY=e.clientY-oldY; 
     newX=e.clientX-oldX; 
     div.style.top = newY + 'px'; 
     div.style.left = newX + 'px'; 
     oldY=newY; 
     oldX=newX;} 
     } 

     addListeners(); 

     </script> 

    </body> 
    </html>

출처

2017-10-23 JensD

이 논리는 잘못된 것입니다 :

newY=e.clientY-oldY; 
newX=e.clientX-oldX; 
... 
oldY=newY; 
oldX=newX;

하자가 시작할 때 당신의 oldX 0을 말한다. e.clientX은 전체 hd 화면에서 1920 일 수 있습니다. 이미지가이 개 이상한 위치에서 점프하는 이유

newX=e.clientX-oldX; // 1920 - 0 
oldX=newX; // 1920 
... // Next tick 
newX = e.clientX - oldX; // 1920 - 1920 
oldX=newX; // 0

그래서 기본적으로 이것이다 : 때문에

newX 값은 1920 0에서 점프 할 수있다.

출처

2017-10-23 16:07:24 lilezek

확인 코드를 수정했지만 여전히 올바르게 작동합니다. 마우스를 누르고 이미지를 움직이는 것은 효과가 없습니다. 마우스를 미리 클릭하고 나중에 이동해야합니다. – JensD

@ JensD, 코드를 수정 한 경우이를 정답으로 표시하거나 더 나은 대답을 제공 할 수 있습니다. – lilezek

@lilizek 첫 번째 분석에 감사드립니다. 매우 도움이되었습니다. 나중에 더 좋은 코드로 돌아올거야. – JensD

이제 개선 된 코드입니다. 전역 변수의 사용이 줄어들었고 oldX/Y가 두 개만 남아 있습니다. 내 첫 번째 논리적 오류 포지셔닝이 수정되었습니다. 다른 문제는 mouseup 이벤트를 금지하는 이미지의 드래그 동작이었습니다. 그래서 draggable을 false로 설정하고 이제는 Chrome 브라우저에서 제대로 작동합니다. 또한 img와 스크립트의 순서를 고려해야했습니다 ... 두 태그 사이에 참조가있는 경우 때때로 중요합니다. 이제 http://ardent.de/JS/을보고 마우스 버튼을 누르고 마우스를 움직여 이미지를 이동하십시오.

 <html> 
     <head> 
     <meta charset="utf-8"> 
     </head> 
     <body> 
     <div id="image" onmousedown="mouseDown();" onmouseup="mouseUp();"> 
      <img src="schloss.jpg" draggable="false" /> 
     </div> 

     <script> 
     var oldY,oldX; 

     function getCoordinates(elem) { 
      var LeftPos = elem.offsetLeft; 
      var TopPos = elem.offsetTop; 
      return {X:LeftPos,Y:TopPos}; 
     } 

     function mouseUp() { 
      document.removeEventListener('mousemove', mouseMove, false); 
      document.removeEventListener('mouseup', mouseUp, false); 
     } 

     function mouseDown() { 
     document.addEventListener('mousemove', mouseMove, false); 
     document.addEventListener('mouseup', mouseUp, false); 
     oldY=-1; oldX=-1; 
     } 

     function mouseMove(e){ 
      var iwidth,iheight,newX, newY, diffX, diffY; 
      var div=document.getElementById('image');   
      div.style.position = 'absolute'; 
      if (oldX==-1) { 
      diffX=0;diffY=0;} 
      else { 
      diffY=e.clientY-oldY;diffX=e.clientX-oldX;} 
      var p=getCoordinates(div); 
      newY=p.Y+diffY;newX=p.X+diffX; 
      div.style.top = newY + 'px';div.style.left = newX + 'px'; 
      oldY=e.clientY;oldX=e.clientX; 
      } 

     </script> 

    </body> 
    </html>

출처

2017-10-30 18:33:59 JensD

javascript로 이미지 이동기가 제대로 작동하지 않습니다.

답변

관련 문제