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

2023年4月3日 156次阅读

参见英文答案 >
HTML5 Canvas Motion Blur effect?                                    2个

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

最佳答案 您可以使用绝对定位和不透明度通过在自身顶部堆叠相同的图像来创建模糊效果.这是一个快速演示,它可能不是你想要的效果,但它可以开始：

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

点赞