Question

我有一个放大＆＃39; div（.large）附加到mousemove事件但基础内容仍然可以点击。

我正在努力找到一种方法来放大放大缩放中的底层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

你不能跳过＆＃34;比例变换+重复＆＃34;部分当您需要在div中扩展HTML元素时。

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

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

顺便说一下这是不可能的＆＃34; ...改变外部div的范围内的屏幕像素比...＆＃34;

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

1 个答案: