模糊身体中的所有元素

问题描述 投票:15回答:7

我试图模糊屏幕上的所有内容,除了加载动画。这就是我尝试过的。

$("#addall").click(function() {
  $('#loading').show();
  $('body:not(#loading)').css("filter", "blur(3px)");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="simple-loading" style="display: none" id="loading">
  <div class="active dimmer">
    <div class="text loader">Loading...</div>
  </div>
</div>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec placerat id nisi eget egestas. <a id="addall" href="javascript:void(0)">Load.</a> Nullam luctus ac ipsum vel blandit. Cras eu felis ac lorem porta egestas. Sed interdum cursus ligula, sit amet euismod velit volutpat at. Fusce luctus scelerisque mollis. Praesent ligula neque, vehicula elementum justo sed, egestas accumsan eros. Suspendisse at est eget nunc efficitur vestibulum. Suspendisse potenti. Pellentesque quis fermentum ligula.</div>

我也试过了

$("body").each(function(event) {
    if (event.target.id != "loading") {
        $(this).css("filter","blur(3px)");
    }
});

它永远不会有效......有什么好的解决方案吗?

javascript jquery
7个回答
22
投票

问题是你的选择器适用于所有body元素,然后选择那些没有ID loading的元素。由于只有一个body元素,并且它确实没有此ID,因此选择它。当然,这不是你想要的。您想要选择body元素的所有子元素,然后过滤那些没有loading ID的子元素。

选择器需要是body > *:not(#loading)

澄清一下:这个选择器选择所有元素(*)...... ......那是身体的孩子(body > *) ......并且没有ID加载(*:not(#loading))。

这使用child selectorspec)和negation pseudo-class :not()spec)。

body > *:not(#loading) {
  background: #ffd83c;
  filter: blur(3px);
}

div, p {
  margin: 10px;
  padding: 5px;
}
<div>Some DIV.</div>
<div id="loading">Loading DIV</div>
<div>Some other DIV.</div>
<p>A paragraph.</p>

9
投票

试试这个

您只能使用css实现此目的。不需要JQUERY

请参阅以下代码

body > *:not(#loading) {
  filter: blur(3px);
}
<div>Some DIV.</div>
<div id="loading">Loading DIV
    <div style='padding:15px;'>Some other DIV inside loading div.</div>
</div>
<div>Some other DIV.</div>
<p>A paragraph.</p>

enter image description here


6
投票

不幸的是you cannot blur an HTML node without blurring its children

一种解决方案是将您的内容和加载图像加载到父div中的两个div中,如下所示。

<div id="parent_div" style="position:relative;height:300px;width:300px;">
    <div id="background" style="position:absolute;top:0;left:0;right:0;bottom:0;background-color:red;filter: blur(3px);z-index:-1;"></div>
    <div id="loading">Spinner...</div>
</div>

模糊/ unblur只是做$('#background').css('filter', 'blur(3px))


3
投票

试试这个,

$("#addall").click( function() {
    $('#loading').show();
    $('body').not("#loading").css("filter","blur(3px)");
});

我改变了,语法的工作方式。希望这可以帮助。


2
投票

尽管提供了答案,如果有人仍然对此感到头疼。你必须从直接的父母开始你的通配模糊到你想要不要模糊的孩子。就我而言,我必须做这样的事情:

body.modal-open > #wrapper > #page-content-wrapper > #app > div > *:not(#newApplicationModal)

因为如果我完成了

body.modal-open > *:not(#newApplicationModal)

它仍然模糊了一切,因为身体的嵌套孩子是我想要的不模糊物品的父容器,导致父母模糊,内容随之变得模糊。


1
投票

这很简单。请尝试以下方法:

$('body').not("#loading").css("filter","blur(3px)");

上面的选择器正在选择除了id加载的元素之外的整个主体。

但是我已经纠正了语法,但除了加载之外不会模糊,因为身体下的所有东西都会模糊。你必须改变你的html结构,如:

 <body>
    <div id="loading">Here your logic image..text or whatever</div>
    <div id="bodyContainer">Your whole html that was in your body</div>
 </body>

现在在jquery中,您可以执行以下操作:

 $('#bodyContainer').css("filter","blur(3px)");

1
投票

这对我有用:

body > *:not(#loading > *){
    filter: blur(3px);
}
© www.soinside.com 2019 - 2024. All rights reserved.