Question

我希望产生与使用灯箱时相同的效果。

我想要的效果是当你点击图像时，除了屏幕中心的图像外，一切看起来都很模糊。

如果用JS完成，请举例说明jQuery。

DEMO：http://www.huddletogether.com/projects/lightbox2/ （点击图片）。

Answer 1

使用JavaScript的setAttribute（）对使用createElement（）和appendChild（）创建的新img元素进行这些更改。

CSS

body {
background-color:black;
color:white;
}
#upp {
position: fixed;
top: 100;
left: 100;
width: 70;
height:50;
color:black;
background-color: white;
opacity:1;
z-index:1;
}
#cover {
position: fixed;
top: 0;
left: 0;
width: 100%;
height:100%;
background-color: white;
opacity:0.7;
}

HTML

<p>this is below. :P</p>
<div id="cover"></div>
<div id="upp"><p>this should be up. way up that the previous one.</p></div>

用img元素替换p元素并相应地进行更改。

Answer 2

无法模糊页面内容的其余部分。现在我说了，这是你怎么做的（不要这样做）：

前段时间我开始研究HTML - ＆gt; Canvas渲染器。它可以在这里找到： https://github.com/cwolves/CanvasRenderer。这将采用您现有的页面结构并将其呈现为HTML5画布（或在IE＆lt; 9到FlashCanvas中）。拆开仓库，修复其中的所有错误。

将页面渲染到画布后，使用http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html将其模糊。将此画布放在整个页面上，显示您的灯箱。

Answer 3

这是working jsFiddle，可以满足您的需求。这很麻烦，因为它听取了对整个文档的点击。

它的工作原理是为您选择的图像使用两个单独的z-index值和一个.highlighted类。您的叠加层只需要比正文本身更高的z-index值，但所选图像本身需要更高的z-index。所有图片都需要设置为position: relative。

我们可以通过听取文档点击并查看目标是否为图像来实现此目的。如果是，我们删除所有.highlighted类，如果不存在则附加叠加，如果不存在则将其删除。然后，我们向目标添加.highlighted类。如果目标是文档的任何其他部分，我们将删除叠加层。

Answer 4

没关系，谢天谢地，但我已经设法自己做了:)。

我写了一个简短的脚本，它简单地将网站的DIV淡化为0.5，然后淡出div我想要的主DIV一侧，并且它有效！

请参阅以下代码：

<script type="text/javascript">
$('#messagesLink').click(function() {
    $('#wrapper').fadeTo('slow', 0.5, function (){
        $('#messageBox').fadeIn();
    });
});

$('#exitLink').click(function() {
    $('#messageBox').fadeOut(function (){
        $('#wrapper').fadeTo('slow', 1); 
    });
});
</script>
<div id="messageBox" style="display: none; width: 300px; height: 300px; position: absolute; top: 50px; left: 50%; margin-left: -150px; background-color: white; text-align: center; z-index: 9999">
    This is a text box! <a href="javascript:void(0);" id="exitLink">Click here to close!</a>.
</div>
<div id="wrapper" class="adminMainWrapper" style="z-index: -1">
    You have <a href="javascript:void(0);" id="messagesLink">5 new messages</a>
</div>

现在我要做的就是完成一些小事并整理这个烂摊子:) 非常感谢您的帮助！：）

除了div之外，让一切都淡出/模糊

4 个答案: