如何製作透明放大鏡？

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>