javascript - 缩放 'magnifying' div 下的任何类型的内容

Question

我有一个附加到 mousemove 事件的“放大”div (.large)，但底层内容仍然可点击。

jsfiddle

我正在努力寻找一种方法来缩放放大缩放内的底层 div，而无需构建 div 两次，放大一个版本并将其限制在 .large 内(典型的 jquery 缩放插件似乎在页面上有一个小图像悬停时会显示更大的图像)。这对我来说似乎是一种复杂的方法，我不能只改变 .large div 中的像素比率(每个物理像素的逻辑像素更少？)并创建局部缩放效果 - 这可能吗？

注意:here 问题中的类似设置(但内容被克隆和隐藏，我想避免这种情况)。

HTML:

  <div class="magnify">
    <img class="small" src="http://placehold.it/300x150" width="400"/> 
    <a href="#" target = "_blank" style="position:absolute;left:50%;top:40%;width:20px;height:20px;border:5px solid red; border-radius:10px">Demo clickable link</a>
  <div class="large"></div>
  </div>
  <p id="demo"></p>

CSS:

   .magnify {width: 900px; margin: 50px auto; position: relative;border:1px solid red;}
   .small { display: block; width:900px;}

   .large {
    width: 275px; height: 275px;
    position: absolute;
    border-radius: 100%;

    pointer-events:none; /* allows user to click through the div to 
                     underlying content */   
    }

JS:

$(document).ready(function(){

$(".magnify").mousemove(function(e){

    x = e.clientX;
    y = e.clientY;
    coor = "Coordinates: (" + x + "," + y + ")";
    document.getElementById("demo").innerHTML = coor;


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

    //fade out the glass if the mouse is outside the container
    if(mx < $(this).width() && my < $(this).height() && mx > 0 && my > 0)
    {
        $(".large").fadeIn(100);
    }
    else
    {
        $(".large").fadeOut(100);
    }
    if($(".large").is(":visible"))
    {
        //move the magnifying glass with the mouse
        var px = mx - $(".large").width()/2;
        var py = my - $(".large").height()/2;

        $(".large").css({left: px, top: py});
    }
})
})

Answer 1

当您需要在 div 中缩放 HTML 元素时，您不能跳过“缩放变换 + 复制”部分。

如果您只需要图像，您可以使用 CSS 背景位置创建一些魔法，但需要更大的图像。

您可以做的另一件事是使用 CANVAS ZOOM方法。

顺便说一句，这是不可能的“...在外部 div 的范围内更改屏幕像素比例...”