Question

编辑：你可以看到我的代码在这里工作：unf.edu/~n00804716/site/work.html

当我打开iframe时，我试图用jQuery模糊一个部分。 iframe最初是隐藏的，但在单击按钮时显示为固定元素。我找到了一种方法，但它需要过多的代码。所以，我试图减少一点，但不能让它工作。这就是我所拥有的：

$('#slides iframe').hide();

$("span").click(function() {
    $("#slides iframe").fadeIn(300);
});

$('#slides iframe').each(function(){
    if ( $(this).css('display') == 'block')
    {
        $("section").css({
            'filter': 'blur(15px) greyscale(80%)'
        });
    } else {
        $("section").css({
            'filter': 'blur(0px) greyscale(0%)'
        });
    }
});

这就是我的HTML设置方式：

<div id="slides">
   <div id="slide-2" class="slide">
      <iframe class="zoo-video"></iframe>
      <section>
          <span></span>
          /*other content*/
      </section>
   </div>
</div>

CSS：

#slides iframe {
    width: 90%;
    margin: 0 auto;
    height: 90%;
    z-index: 9999;
    position: absolute;
    right: 0;
    left: 0;
    top: 5%;
    bottom: 0;
}

#slides,
section {
    width: 100%;
}

另外，我不完全确定供应商前缀是否必要。有没有更简单的方法来做到这一点？诀窍是，iframe是一个占据屏幕90％的vimeo播放器。因此，当页面垂直滚动或用户点击iframe外部时，我还需要iframe关闭/折叠。当它崩溃时，我需要它的部分不再有模糊或灰度。以下是我用来在用户点击iframe时折叠iframe的代码：

$(document).mouseup(function (e) {
    var container = $("#slides iframe");
    if (!container.is(e.target)
        && container.has(e.target).length === 0)
    {
        container.fadeOut(230);
    }
});

Answer 1

http://jsfiddle.net/721nma0g/

$(document).ready(function () {
    var video = $("#slides iframe");
    $(document).mouseup(function (e) {
        if (!video.is(e.target) && !video.has(e.target).length) {
            video.removeClass("visible-video");
        }
    });

    $("button").click(function() {
        video.addClass("visible-video");
    });
});

我没有用jQuery做这么多，而是经常只用JS来设置一个类。使用CSS可以做到比你想象的更多。重要的是CSS。你有一个小的拼写错误（美国和英国拼写）greyscale vs grayscale。但是你可以看到+选择器在这里非常有用！选择.visible-video后面的元素，您可以定位所需的部分！

iframe {
    display: none; /* Hide the video initially */
    width: 90%;
    margin: auto 5%;
    position: fixed;
    z-index: 20;
    top: 48px;
    box-shadow: 0 4px 36px rgba(0,0,0,0.72), 0 0 8px rgba(0,0,0,0.48);
}

.visible-video {
    display: block; /* show the video when the class has been set */
}
section {
    margin: 24px auto;
    width: 80%;
}
.visible-video + section {
    -webkit-filter: blur(15px) grayscale(80%);
    filter: blur(15px) grayscale(80%);
}

编辑：我改进了iframe的CSS代码，因此它可以更好地扩展，并且我包含了一些JS，可以检测用户是否点击了滚动条。如果没有这个添加，单击滚动条时iframe也会关闭。

全屏结果：https://jsfiddle.net/721nma0g/5/embedded/result/

编辑jQuery：

if (!video.is(e.target) && !video.has(e.target).length && (e.target != $('html').get(0))) {
    video.removeClass("visible-video");
}

编辑CSS：

iframe {
    display: none;
    max-width: 90%;
    position: fixed;
    z-index: 20;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 4px 36px rgba(0, 0, 0, 0.72), 0 0 8px rgba(0, 0, 0, 0.48);
}

在手机上也很棒。

mobile result

jQuery模糊div不在焦点

1 个答案: