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

我很难找到实现这一点的方法，我已经找到了很多关于静态图像的资源，但对于运动中的东西却没有

我基本上有一个使用jQuery循环的幻灯片，我希望使叠加div元素的背景部分在幻灯片上直接在它们下面产生模糊效果。我只需要在Chromium中工作，这样整体浏览器兼容性就不成问题了

下面是一个JSFIDLE来获得更好的想法：

$（文档）.ready（函数（）{
$（'#背景滚动'）。循环（{
外汇：“淡出”，
暂停：0，
速度：“1000”//淡入下一幅图像的时间[毫秒]
超时：“2000”//在映像上花费的时间[毫秒]
});
});
#背景滚动{宽度：100%；高度：100%；位置：固定；顶部：0；左侧：0；z索引：-10；}
.box{宽度：40%；高度：100px；背景：RGBA（255255,0.4）；边框：5px实心#FFF；
-webkit边界半径：50px；
-moz边界半径：50px；
边界半径：50px；}
.box p{文本对齐：中心；行高：25px；颜色：#FFF；字体大小：50px；}
模糊在这个元素后面

基本上是Blur.js（）的动态版本，它可以应用于所有内容，而不仅仅是背景图像元素。

类似的内容？

代码：

想法是获取当前的幻灯片图像，并将其用作.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]

        });   


    });

演示：

---

这个想法同样简单，获取幻灯片html（图像），获取大小，调整位置，将图像的大部分隐藏在.box之外（溢出：无）。。。然后循环它。：）

如果你也把代码贴在这里，那会有帮助的。只要放一个例子的副本，它基本上只是一个小幻灯片，上面放了两个div元素。我希望只能在幻灯片上方的div下方模糊幻灯片。您可能会弄乱div元素的

样式。不透明度
，可能会使用setinvval（）进行平滑模糊。这有什么帮助吗？不幸的是，没有，我正在寻找类似blur.js:的东西，但是可以应用到slideshow元素。因为blur.js只是使用背景图像来伪造效果，并不像我期望的那样动态。这与我所追求的非常接近，但唯一的问题是，我想看看是否有可能使它与幻灯片系统同步动画。我认为这是最好的结果，所以谢谢你的帮助：）@Marcus，一切都是可能的。检查更新的答案。；）
.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]

        });   


    });