javascriptでイメージムーバーが正常に動作しない

イメージが大きすぎるため、ブラウザウィンドウでスクロール可能にしたい。スクロールは、a）スクロールバー経由で、b）マウス操作による2つの方法で動作します。後者の場合は、希望の方向に画像をドラッグするのと同じように動作するはずです。そこで私はスクリプトを作り、それを画像に添付しました。コードは正しく見えますが、正しく動作しません。画像が消えたり、望ましくない位置にジャンプしたりすることがあります。あなたは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年になる可能性があります。画像は、2つの奇数の位置からジャンプされる理由

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

だから、基本的にこれは次の理由

newX値は0から1920までジャンプすることができます。

出典

2017-10-23 16:07:24 lilezek

OK、私はコードを修正しましたが、それでも正常に動作します。マウスを押したまま画像を動かすことはできません - あらかじめマウスをクリックして後に移動する必要があります。 – JensD

@ JensD、あなたのコードを修正した場合、これを正しい答えとしてマークするか、より良い答えをあなた自身が提供することができます。 – lilezek

@lilizek最初の分析に感謝しました。これは非常に役に立ちました。私は後でより良いコードで戻ってきます。 – JensD

これは改良されたコードです。グローバル変数の使用が減少し、oldX/Yの2つだけが残ります。私の位置決めとの最初の論理エラーは修正されました。もう一つの問題は、マウスアップイベントを抑制した画像のドラッグ動作でした。だから私は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でイメージムーバーが正常に動作しない

答えて

関連する問題