使一切淡入淡出/模糊除了一个div

我想使用与使用灯箱相同的效果。使一切淡入淡出/模糊除了一个div

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

如果是用JS完成的话，请用jQuery举个例子。

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

来源

2011-12-27 Dor Zuberi

这种效果并不模糊;它只是在视口上放置一个稍微不透明的蒙版，然后将所讨论的项目分层叠加在视图上。 – Tejs 2011-12-27 20:53:58

好的，但我该怎么做？：O – 2011-12-27 20:57:33

没关系，感谢队友，但我已经成功地做我自己:)

我写了一个简短的脚本，它只是褪色网站的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>

现在我已经剩下要做的就是完成一些小事和收拾这个烂摊子:) 非常感谢你的帮助！ :)

来源

2011-12-28 05:20:07

这是一个working jsFiddle做你想做的。它听起来像是在听整个文档的点击，这很冒险。

它通过使用两个单独的z-index值和.highlighted类为您选择的图像工作。您的覆盖图只需要比身体本身更高的z-index值，但所选图片将会自己本身需要更高z-index。图像全部需要设置为position: relative。

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

来源

2011-12-27 20:54:11

不会模糊任何东西 – 2011-12-27 20:55:57

@cwolves他并不意味着模糊。他的意思是面具的效果，你可以看到上面的Tejs的评论。 – 2011-12-27 20:57:58

这不是我正在寻找的，我希望少于JS库我可以使用:) – 2011-12-27 20:58:04

模糊其余的页面内容是不可能的。现在我说，这是你如何做到这一点（不这样做）：

前段时间我开始工作的HTML - >画布渲染器。它在这里可用： https://github.com/cwolves/CanvasRenderer。这将采用您现有的页面结构并将其呈现到HTML5画布（或在FlashCanvas的IE <中）。叉回购，修复所有的错误。

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

来源

2011-12-27 20:57:02

但灯箱如何做到这一点？ – 2011-12-27 20:59:12

他实际上并不意味着“模糊”。 – 2011-12-27 20:59:52

@JoshSmith - 如果他这样做会更有趣！ – 2011-12-27 21:05:47

使用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元素并做出相应的变化。

来源

2016-07-04 22:26:02

使一切淡入淡出/模糊除了一个div

回答

相关问题