1

我想对我的文档做一些非常独特的事情（以前没见过），因此可能甚至不可能。

我想要的是有一个 div 将覆盖文档中的所有内容，也许给它背景黑色，这样什么都不可见。其次，我想在覆盖层中有一个不共享黑色背景的小 squire 窗口，实际上它有点透明，因此可以通过该窗口“窥视”以查看文档内容。但只有这个窗口所在的内容。这有点像那些“缩放”插件，其中只有一小部分被缩放，但在这种情况下，它会显示特定的内容。知道如何创建这样的东西吗？

4

2 回答 2

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()fromjQuery UI来移动 div。并且在拖动div上面显示的 4 时正在调整它们的高度和宽度以填充 和 之间的#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
});

在这个小提琴中，您将看到填充物div的行为

于 2013-05-03T08:31:22.690 回答
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();
});

您可能需要在定位方面遇到困难，并且窗口将是固定大小的。虽然不可拖动。

于 2013-05-03T08:03:28.450 回答