动态模糊下面的幻灯片内容 div

Question

我很难找到如何解决这个问题，我找到了很多静态图像资源，但 none 动态图像资源。

我基本上有一个使用 jQuery Cycle 的幻灯片，我希望使叠加 div 元素的背景部分在它们正下方的幻灯片上产生模糊效果。我只需要它在 Chromium 中工作，因此整体浏览器兼容性不是问题。

这里是一个 JSFiddle 以获得更好的想法：https://jsfiddle.net/9fy9yazc/

<!DOCTYPE HTML>
<html>
    <head>
    <meta http-equiv='Content-Type' content='text/html; charset=utf-8' />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type='text/javascript' src='http://malsup.github.io/jquery.cycle.all.js'></script>


    <script type='text/javascript'>
    $(document).ready(function() {

        $('#background-scroll').cycle({ 
            fx: 'fade',
            pause: 0, 
            speed: "1000", //Time to fade into the next image [in milliseconds]
            timeout: "2000"  //Time spent on image [in milliseconds]
        });

    });

    </script>

    <style>
    #background-scroll { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index:-10;}

    .box {width: 40%; height: 100px; background: RGBA(255,255,255,0.4); border: 5px solid #FFF;
    -webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;}

    .box p {text-align: center; line-height: 25px; color: #FFF; font-size: 50px;}
    </style>

    </head>

    <body>

    <div id="background-scroll"><!-- Add Backgrounds in via PHP, all we need to do is add backgrounds into the backgrounds folder -->
        <img src='http://i.imgur.com/yd4bWi2.jpg' class='background' />
        <img src='http://i.imgur.com/n91n9rr.jpg?1' class='background' />
    </div>

    <div class="box blur">
        <p>Blur Behind this Element</p>
    </div>


    </body><!-- Closes off the HTML Document -->
</html>

基本上是 Blur.js (http://www.blurjs.com/) 的动态版本，可以应用于所有内容，而不仅仅是背景图像元素。

Answer 1

是这样的吗？ https://jsfiddle.net/9fy9yazc/4/

代码：

$(document).ready(function() {

        $('#background-scroll').cycle({ 
            fx: 'fade',
            pause: 0, 
            speed: "1000", //Time to fade into the next image [in milliseconds]
            timeout: "2000", //Time spent on image [in milliseconds]
            before: blur_it
        });

 function blur_it() {

     $('.box').css('background-image', 'url(' + this.src + ')');
     width=$('#background-scroll').width()+'px';
     height=$('#background-scroll').height()+'px';
     $('.box').css('background-size', width+ ' '+height);

}        

    });

想法是获取当前幻灯片图像，并将其用作 .box div（但为全尺寸）的背景，并对其应用模糊滤镜...您将不得不玩具有背景位置（取决于 .box 位置），但您也可以动态设置它（使用 jQuery）（需要稍作调整）。

当前值：

.box { -webkit-filter: blur(5px);

  filter: blur(4px);

margin:50px 0px 0px 60px;
 background-position: -80px -58px;
}

编辑：为了完全同步，像这样：

$(document).ready(function() {

        $('#background-scroll').cycle({ 
            fx: 'fade',
            pause: 0, 
            speed: "1000", //Time to fade into the next image [in milliseconds]
            timeout: "2000", //Time spent on image [in milliseconds]

        });

    $('.box').html($('#background-scroll').html());
   width=$('#background-scroll').width()+'px';
   height=$('#background-scroll').height()+'px';   
$('.box img').css('width',width);
$('.box img').css('height',height);   

//margin depends of your .box margin!!!
$('.box img').css('margin-left','-70px');  
$('.box img').css('margin-top','-55px');      


  $('.box').cycle({ 
            fx: 'fade',
            pause: 0, 
            speed: "1000", //Time to fade into the next image [in milliseconds]
            timeout: "2000", //Time spent on image [in milliseconds]

        });   


    });

演示版：https://jsfiddle.net/9fy9yazc/7/

想法还是很简单，获取幻灯片 html（图像）、获取大小、调整位置、将图像的最大部分隐藏在 .box 之外（溢出：none）...以及循环它。 :)

动态模糊下面的幻灯片内容 div

Dynamically blur slideshow content underneath div

html

javascript

jquery

blur