我想对我的文档做一些非常独特的事情(之前没见过)因此可能甚至不可能。
我想要的是有一个div,它将覆盖文档中的所有内容,或者将背景设置为黑色,以便看不到任何内容。其次我希望在叠加层中有一个小的乡绅窗口,它不共享黑色背景,实际上它有点透明,因此可以通过该窗口“窥视”以查看文档内容。但只有这个窗口的内容。它有点像那些“缩放”插件,其中只有一小部分被缩放,但在这种情况下,它会显示特定的内容。知道怎么创造这样的东西吗?
答案 0 :(得分:4)
您可以做的一个例子如下(它可能不是最好的但它有效)
<强> 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
});
答案 1 :(得分:2)
另一个开始:
这需要一些额外的工作,但它可能适合您的需要。
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();
});
您可能需要偶然发现定位,窗口将是固定大小的窗口。虽然不会拖延。