在JavaScript/jQuery中如何应用运动模糊？

Question

在JavaScript/jQuery中如何应用运动模糊？

javascriptjqueryslidergallerymotion-blur

4

我想知道如何在javascript/jquery中实现动态模糊。我有一个水平画廊，当图像移动时，我想应用运动模糊。实际上，我已经使用以下方法完美地解决了这个问题：使用带有运动模糊效果的叠加图像（photoshop），并根据图像速度调整不透明度。渲染效果看起来非常好，但我需要加载所有图像两次，这很麻烦。在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>

- Tib

没有纯JS的实际方法来做到这一点。你可以使用canvas。你现在所用的方法应该能解决问题。如果你想减少图片数量，你可以将它们制作成（类似）精灵：高度加倍的图片，上半部分为正常，下半部分为模糊。然后将图像设置为背景图像，并在垂直位置之间切换两个部分。 - isotrope

@isotrope 看起来 Tib 只想在画廊滚动时替换图像。没有什么花哨的东西。 - Jeffrey Sweeney

这是一个很好的问题，所以我不确定为什么它被踩了。 :/ - Anderson Green

@isotrope，实际上可以使用不透明度来实现这一点：请参见此处。 - Anderson Green

3年后：一些不错的演示http://tympanus.net/Tutorials/MotionBlurEffect/index.html - Tib

1

Canvas运动模糊和jQuery运动模糊是两个完全不同的东西。这绝对不是重复内容，实际上是一个非常好的话题。 - Rorschach120

2个回答

0

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

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

- Aldo Stracquadanio

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jasper · Accepted Answer

您可以使用绝对定位和不透明度来创建模糊效果，通过将相同的图像堆叠在一起。以下是一个快速演示，可能不是您想要的效果，但可以帮助您入门：

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