如何在javascript/jquery中应用运动模糊

Question

我想知道如何在javascript/jquery中制作运动模糊。我有一个水平图库，我想在图像移动时应用运动模糊。事实上，它非常适合这种方式：一个带有运动模糊（photoshop）的叠加图像，不透明度根据图像的速度而变化。渲染看起来很好，但我需要加载2倍的所有图像，这很糟糕。在html:中

<div id="slider wrapper">
  <ul>
    <li>
      <a href="">
        <img src="img1.jpg"/>
        <img src="img1_blur.jpg"/>
      </a>
    </li>
    <li>
      <a href="">
        <img src="img2.jpg"/>
        <img src="img2_blur.jpg"/>
      </a>
    </li>
    <li>
      <a href="">
        <img src="img2.jpg"/>
        <img src="img2_blur.jpg"/>
      </a>
    </li>
</div>

Answer 1

您可以使用绝对定位和不透明度，通过将相同的图像叠加在其上来创建模糊效果。这里有一个快速演示，它可能不是你想要的效果，但它可以让你开始：

$('img').on('mouseenter', function () {
    var $theClone = $(this).clone().css({ opacity : 0.5, position : 'absolute', top : 0 });
    $(this).parent().append($theClone);
    $theClone.animate({ left : 10 }, 500).on('mouseleave', function () {
        $(this).stop().fadeOut(250, function () {
            $(this).remove();
        });
    });      
});​

当您将鼠标悬停在图像上时，这将创建图像的克隆，然后克隆将动画化为模糊，当您将克隆的图像移出时，它将淡出并从DOM中删除。

下面是一个演示：http://jsfiddle.net/mbFTk/93/

Answer 2

一个纯javascript解决方案并不容易实现，您无论如何都可以尝试一下这个库：

http://www.pixastic.com/lib/