使用Mousemove和左键单击滚动图像堆栈 [英] Scrolling through a Stack of Images using Mousemove and Left button click

问题描述

我正在尝试让我自己的PACS查看器滚动浏览一系列CT头部图像。

I am trying to make my own PACS viewer to scroll through a series of CT head images.

问题是，我无法滚动浏览所有59张图像。我可以让它从第一张图像滚动到第59张图像，但如果你保持LMB点击并移动鼠标，我无法让它滚动回到开头。

Problem is, I am having trouble scrolling through all 59 images. I can get it to scroll through from the first to the 59th image, but I am unable to get it to scroll back to the beginning, if you keep the LMB click and move the MOUSE UP.

现在，当你左键单击和鼠标向下时，你只能从图像1滚动到59，当你左键单击和鼠标向上时，它不会回滚到第一个图像。有什么帮助吗？

Right now when you LEFT CLICK and MOUSE DOWN you scroll only from image 1 to 59 and when you LEFT CLICK and MOUSE UP it doesn't scroll back to the first image. Any help?

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

我做了一个小提琴：

< a href =http://jsfiddle.net/C4Y6H/ =nofollow> http://jsfiddle.net/C4Y6H/

推荐答案

jsBin演示

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

您需要修改代码才能隐藏重叠的图像以便查看上一个图像（在鼠标左侧）移动）。

---

稍微不同的方法是通过计算

You code needed the fix to also hide overlapping images in order to see the previous one (on mouse left move).

---

A slightly different approach would be also to get the .eq() image by calculating the

(mousemoveCoordY - clickedInitiallyAtY) % numberOfImages

DEMO

DEMO

％（提醒操作员）将创建一个无限循环，只是更快的鼠标移动可能会跳过一些帧*。

% (Reminder Operator) will create an infinite loop, just a faster mousemove might skip some frames*.

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

---

*数学（我在谈论）到让它运行得更慢会是这样的：

---

*The math (I was talking about) to make it run slower would be something like:

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

喜欢这个演示 其中（0.1 - 0.9）是你需要的灵敏度（乘数）。

LIKE IN THIS DEMO where (0.1 - 0.9) is the sensitivity (multiplier) you need.

这篇关于使用Mousemove和左键单击滚动图像堆栈的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！