使用鼠標移動和左鍵單擊滾動瀏覽圖片堆棧

Question

我想讓自己的PACS瀏覽器滾動瀏覽一系列CT頭部圖像。

問題是，我無法滾動瀏覽所有59個圖像。我可以從第一個圖像滾動到第59個圖像，但如果保持LMB單擊並移動鼠標，我無法將其滾動回開始。

現在，當您左鍵單擊和鼠標向下滾動時，只會從圖像1滾動到59，並且當您左鍵單擊並且鼠標向上時，它不會滾動回第一個圖像。任何幫助？

jQuery代碼：

$(document).ready(function() { 
    var lbDown = false; 

    $("#imgs").mousedown(function(e) { 
     if (e.which === 1) { 
      lbDown = true; 
     } 
    }); 
    $("#imgs").mouseup(function(e) { 
     if(e.which === 1) { 
      lbDown = false; 
     } 
    }); 

    $("#imgs").mousemove(function(e) { 
     if(lbDown) { 
      e.preventDefault(); 
      $(this).find('img:visible').next().show(); 
     } 
    }); 
}); 

我做了一個小提琴：

http://jsfiddle.net/C4Y6H/

Answer 1

jsBin demo

$(function() { 
    var $imgs = $('#imgs'),  // Cache your elements 
     $img = $('img', $imgs), // Cache your elements 
     lbDown = false, 
     Y = 0,     // Get mouse Y coord 
     exY = 0;     // Used to store old Y value and compare with 
            // new one to get the direction. 

    $imgs.on("mousedown mouseup",function(e) { 
     if (e.which === 1) { 
      e.preventDefault(); 
      lbDown = e.type=="mousedown"; // Boolean true/false 
     } 
    }).on("mousemove", function(e) { 
     if(lbDown) {   
      e.preventDefault(); 
      Y = e.clientY;        // Get new value 
      var $visible = $(this).find('img:visible'); // Get the visible one 
      $img.not(":first").hide();     // Hide all (but first) 
      $visible[Y>exY ? "next" : "prev"]().show(); // Ternary Operator 
      exY = Y;         // Remember old value 
     } 
    }); 
    // You might also want to add mouseleave and set lbDown to false. 
}); 

您需要的代碼修正也隱藏重疊圖像才能看到前一個（鼠標左移）。

---

稍微不同的方法也將是通過計算

(mousemoveCoordY - clickedInitiallyAtY) % numberOfImages 

DEMO

%（提醒操作員）來獲得.EQ（）圖像將創建一個無限循環，只是一個鼠標移動速度更快可能會跳過一些幀*。

$(function() { 
    var $imgs = $('#imgs'), 
     $img = $('img', $imgs), 
     n = $img.length, 
     lbDown = false, 
     Y = 0, 
     clickedY = 0; 

    $imgs.on("mousedown mouseup",function(e) { 
     if (e.which === 1) { 
      clickedY = e.clientY; 
      e.preventDefault(); 
      lbDown = e.type=="mousedown"; 
     } 
    }).on("mousemove", function(e) { 
     if(lbDown) {   
      e.preventDefault();   
      $img.hide().eq((e.clientY-clickedY)%n).show(); 
     } 
    }); 
    // You might also want to add mouseleave and set lbDown to false. 
}); 

---

*數學（我是說），使其運行變慢會是這樣的：

$img.hide().eq((((e.clientY-clickedY)*0.3)|0)%n).show(); 

LIKE IN THIS DEMO其中（0.1 - 0.9）是靈敏度（倍增） 你需要。

Answer 2

在你的一舉一動都顯示下一個（上）可視圖像。沒有代碼來隱藏以前的圖像，因此做相反的事情。也許檢查Y上方向可能是首發...如果Y>或< image.height/2，方向是-1或1，然後改變你的旁邊，以前...