JavaScript放大镜

Question

我在JavaScript中构建了一个放大镜，当我单击它或单击并拖动它时，它工作得很好，但是它不应该隐藏在屏幕上。

$(".menu-left-preview-box-preview").bind('click', function (e) {
    window.location = "page" + ($(this).index() + 1) + ".html";
});

var native_width = 0;
var native_height = 0;
var magnifyIsMouseDown = false;
$(".magnify").parent().mousedown(function (e) {
    magnifyIsMouseDown = true;
});
$(".magnify").mousemove(function (e) {
    if (magnifyIsMouseDown) {
        if (!native_width && !native_height) {
            var image_object = new Image();
            image_object.src = $(".small").attr("src");
            native_width = image_object.width;
            native_height = image_object.height;

        } else {
            var magnify_offset = $(this).offset();
            var mx = e.pageX - magnify_offset.left;
            var my = e.pageY - magnify_offset.top;

            if (mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0) {
                $(".large").fadeIn(100);

            } else {
                $(".large").fadeOut(100);
            }
            if ($(".large").is(":visible")) {
                var rx = Math.round(mx / $(".small").width() * native_width - $(".large").width() / 2) * -1;
                var ry = Math.round(my / $(".small").height() * native_height - $(".large").height() / 2) * -1;
                var bgp = rx + "px " + ry + "px";

                var px = mx - $(".large").width() / 2;
                var py = my - $(".large").height() / 2;
                $(".large").css({ left: px, top: py, backgroundPosition: bgp });
            }
        }
     }
});

$(".magnify").parent().mouseup(function (e) {
    magnifyIsMouseDown = false;
    $(".large").fadeOut(100);
});
$(".magnify").parent().mouseleave(function (e) {
    $(".large").fadeOut(100);
});

manageSlide();

默认情况下，放大镜必须在屏幕上。放大镜可以被拖动，掉下来后，它必须留在那里，在它的下降位置。

在点击和拖动放大镜工作良好，但它不应隐藏在屏幕上。应该在屏幕上。

提供放大镜手柄与那个圆圈(在设计中)。

工作示例：http://jsfiddle.net/mohsin80/4ww8efx5/

Answer 1

我将if (magnifyIsMouseDown) {替换为if (isDragging) {，并创建了以下方法：

var isDragging = false;
$(".magnify").parent().mouseup(function(e) {
    isDragging = false;
});
$(".magnify").parent().mousedown(function(e) {
    isDragging = true;
});

若要使用jQuery进行模拟拖动事件，请执行以下操作。

这是小提琴。希望它有所帮助:)