Javascript 放大镜

我用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();

$（“.menu left preview box preview”）.bind（'click'，函数（e）{
window.location=“page”+（$（this.index（）+1）+“.html”；
});
var native_width=0；
var native_height=0；
var放大mousedown=false；
$（“.放大”）.parent（）.mousedown（函数（e）{
放大鼠标向下=真；
});
$（“.放大”）.mousemove（函数（e）{
如果（放大鼠标向下）{
如果（！本机_宽度&&！本机_高度）{
var image_object=新图像（）；
image_object.src=$（“.small”）.attr（“src”）；
本机\u宽度=图像\u对象.width；
本机高度=图像高度=对象高度；
}否则{
var放大_offset=$（this.offset（）；
var mx=e.pageX-放大偏移量。左；
var my=e.pageY-放大偏移量.top；
如果（mx<$（此）.width（）&&my<$（此）.height（）&&mx>0&&my>0）{
$（“.large”）.fadeIn（100）；
}否则{
美元（“.large”）。淡出（100）；
}
如果（$（“.large”）.是（“：可见”））{
var rx=Math.round（mx/$（“.small”）.width（）*本机宽度-$（“.large”）.width（）/2）*-1；
var ry=Math.round（my/$（“.small”）.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}）；
}
}
}
});
$（“.放大”）.parent（）.mouseup（函数（e）{
放大鼠标向下=假；
美元（“.large”）。淡出（100）；
});
$（“.放大”）.parent（）.mouseleave（函数（e）{
美元（“.large”）。淡出（100）；
});
管理幻灯片（）；

默认情况下，放大镜必须位于屏幕上。放大镜可以拖动，放下后必须保持在放下位置

点击并拖动放大镜可以很好地工作，但它不应该隐藏在屏幕上。它应该出现在屏幕上

提供带有该圆圈的放大镜手柄（设计）

工作示例：

我将

if（放大鼠标向下）{

替换为

if（IsDraging）{

，并创建了以下方法：

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

使用jQuery生成模拟拖动事件

---

以下是。希望它有帮助：）

为什么你把JavaScript代码放在HTML字段的

script

标记中？它太难阅读了，对你/我们来说没有任何好处。我把它放在scrip标记中，然后它就不能正常工作了，这就是为什么…它不能在脚本标记之外工作，因为你需要手动收听

window.onLoad

。默认情况下，JSIDLE将在

onLoad

中包装您的代码。在左侧菜单中，将下拉列表从

onLoad

更改为

No wrap-in

，然后您可以将您的JS从脚本标记中取出以帮助他人。您也可以通过小提琴拉入JQuery，因此无需将其拉入脚本标记中。最后，如果突出显示您的代码，然后按shift tab键，它将自动格式化。正确格式化的代码有助于其他人阅读代码，反过来也有助于您。坦率地说，小提琴很痛苦。是因为我还是放大镜确实使图像变小了？您好pedrop mendes我单击放大镜手柄，然后我的鼠标光标移动到放大镜圆圈的中心，但我确实这样做了我不想这样。我希望它在手柄和圆圈上都可以拖动。工作演示：这个演示在桌面上很好，但在移动设备放大镜上拖动不起作用。请帮助我。