jquery - 使用 Mousemove 和左键单击滚动浏览一堆图像

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();
        }
    });
});

我做了一个 fiddle :

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.
});

您的代码需要修复以隐藏重叠图像，以便看到前一个图像(鼠标左移时)。

---

一种略有不同的方法也是通过计算

来获取 .eq() 图像

(mousemoveCoordY - clickedInitiallyAtY) % numberOfImages

DEMO

%(提醒操作符)将创建一个无限循环，更快的鼠标移动可能会跳过一些帧*。

$(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) 是您需要的灵敏度(乘数)。