在“放大” div 下缩放任何类型的内容

Question

我有一个“放大镜”div（.large），它附加在mousemove事件上，但底层内容仍然可点击。

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

- Liz

---

据我所知，不行。您可以使用CSS 缩放来缩放div的内容，但这不适用于缩放div下面的内容。这是一个快速（故障）演示。 - Kiruse

检查这个是否有帮助：链接 - Sunil Hari

我的问题是，我能否不使用CSS缩放变换而达到同样的效果！我不想复制div并将其放大，而是想在外部div的范围内更改屏幕像素比例，以创建相同的效果。 - Liz

http://jsfiddle.net/gthomas3/tvth7fqx/ - Graham T

非常酷的@GrahamT，尽管当用户向下滚动时需要应用一些偏移量，以使放大区域处于正确位置。 - Liz

Answer 1

当你需要在div内缩放HTML元素时，无法跳过“比例变换+重复”部分。

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

另一件事是使用CANVAS ZOOM方法。

顺便说一句，这是不可能的：“……在外部div的范围内改变屏幕像素比率……”

- Sams