用透明窗口覆蓋文檔

Question

我想對我的文檔做些什麼，這是非常獨特的（以前沒有見過），因此可能甚至不可能。

我想要的是將div覆蓋文檔中的所有內容，也許會將其設置爲背景黑色，以便看不到任何內容。第二，我希望在覆蓋層中有一個小的鄉紳窗口，它不會共享黑色背景，事實上它有點透明，因此可以通過該窗口「窺視」來查看文檔內容。但只有這個窗口的內容。這將有點像那些僅縮放一小部分的「縮放」插件，但在這種情況下，它會顯示特定的內容。任何想法如何創造這樣的事情？

Answer 1

的你可以做的是下面的一個例子（它可能不是最好的，但它的工作原理）

HTML

<div id='peakview'></div> <!-- This div is your view window --> 
<div id='out'> 
    <div class='overlay'></div> 
    <div class='overlay'></div> 
    <div class='overlay'></div> 
    <div class='overlay'></div> 
</div> 

的<div>內的#out將重新大小相應地#peakview的位置創造了一個完整覆蓋的幻覺。這可以通過簡單的css和一些微積分來完成。

主要是你需要的是元素在屏幕上的位置。

var h = $(this).offset().top; 
var l = $(this).offset().left; 
var r = ($(window).width() - ($(this).offset().left + $(this).outerWidth())); 
//right offset 
var b = ($(window).height() - ($(this).offset().top + $(this).outerWidth())); 
//bottom offset 

在我的例子我用.draggable()從jQuery UI四處移動DIV。同時拖動上面顯示的4 div正在調整它們的高度和寬度以填滿#peakview和document border之間的空格。

的第一個div

$('.overlay:eq(0)').css({ 
    top: 0, 
    left: 0, 
    width: '100%', 
    height: h //the height is always changing depending on the #peakview .offset().top 
}); 

In this fiddle you will see how the filling divs behave

Answer 2

另一個圍脖開始：

http://jsfiddle.net/XDrSA/

這需要一些額外的工作，但它可能會滿足您的需求。

HTML：

<div id="yourContent" style="width: 300px; margin:100px auto;"> 
    <input type="button" id="zoom" value="Click to zoom"/> 
</div> 

<div id="zoomer"> 
    <div id="window">This is your "window"</div> 
    <div id="overlay_top"></div> 
    <div id="overlay_left"></div> 
    <div id="overlay_right"></div> 
    <div id="overlay_bottom"></div> 
</div> 

CSS：

body { 
    margin:0; 
    padding:0; 
} 

#zoomer { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    top: 0; 
    display: none; 
} 
#overlay_top { 
    height: 20%; 
    width: 100%; 
    background-color: black;  
    position: absolute; 
    top: 0 
} 

#overlay_right { 
    height: 100%; 
    width: 20%; 
    background-color: black;  
    position: absolute; 
    right: 0; 
} 

#overlay_left { 
    height: 100%; 
    width: 20%; 
    background-color: black;  
    position: absolute; 
    left: 0; 
} 

#overlay_bottom { 
    height: 20%; 
    width: 100%; 
    background-color: black;  
    position: absolute; 
    bottom: 0; 
} 

#window { 
    margin: 0 auto; 
    height: 100%; 
    width: 80%; 
    position: absolute; 
    background-color: rgba(0,0,0,.5); 
} 

和一塊JavaScript代碼：

$('#zoom').click(function() { 
    $('#zoomer').fadeIn(); 
}); 

您可能需要與定位絆倒，窗口將是一個固定大小一個。雖然不可拖動。