如何制作透明放大镜？

Question

前段时间我见过使用酷炫透明效果的网站。

如何制作透明元素，因此当您将鼠标悬停在网站背景上时，您可以在该区域下方看到图像？

不能找到这方面的资料，请帮助:)

Answer 1

确定了一些战略和一些例子。

策略：

• 地方背景
• 地方一些阻挡了它
• 做出div使用相同的背景
• 如果鼠标移动，移动这个div
• 如果div移动，将背景移动到主背景的负位置。

例子：

$(function(){ 
 
    $(document).mousemove(function(e){ 
 
     var x = e.pageX; 
 
     var y = e.pageY; 
 

 
     var $t=$(".transfier"); 
 
     var newLeft =x-$t.width()/2; 
 
     var newTop= y-$t.height()/2; 
 
     $t.offset({ 
 
      top: newTop, 
 
      left: newLeft 
 
     }); 
 

 
     $t.css('background-position-x', 0 - x + $t.width()/2); 
 
     $t.css('background-position-y', 0 - y + $t.height()/2); 
 
    }); 
 
});

body { 
 
    background: url(https://wallpaperscraft.com/image/height_canyon_retina_81205_3840x2400.jpg); 
 
    background-position: 0px 0px; 
 
    background-repeat: no-repeat; 
 
    margin: 0px; 
 
} 
 

 
.transfier { 
 
    background: url(https://wallpaperscraft.com/image/height_canyon_retina_81205_3840x2400.jpg); 
 
    background-repeat: no-repeat; 
 
    background-position: 0px 0px; 
 
    position: absolute; 
 
    left: 0px; 
 
    top: 0px; 
 
    width: 200px; 
 
    height: 200px; 
 
    border: 2px solid green; 
 
} 
 

 
.blockMyView { 
 
    background-color: white; 
 
    width: 75%; 
 
    height: 300px; 
 
    border: 1px solid black; 
 
    margin: 50px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="transfier"> hoi </div> 
 
<div class="blockMyView"></div>