使用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 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
%
(提醒操作员)将创建一个无限循环,只是更快的鼠标移动可能会跳过一些帧*。
%
(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屋!