4

我想知道如何在 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>
4

2 回答 2

2

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

$('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/

于 2012-03-09T18:22:36.207 回答
0

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

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

于 2012-03-09T18:03:47.233 回答