如何在javascript / jquery中应用运动模糊？
我想知道如何在javascript / jquery中制作运动模糊。 我有一个水平画廊，我想在图像移动时应用运动模糊。 实际上，它以这种方式完美地工作：具有运动模糊（photoshop）的叠加图像和不透明度根据图像的速度而变化。 渲染看起来很不错，但我需要加载2次我的所有图像，它很糟糕。 在html中：
-
-
-
您可以使用绝对定位和不透明度通过在自身顶部堆叠相同的图像来创建模糊效果。 这是一个快速演示，它可能不是你想要的效果，但它可以开始：
$('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(); }); }); });
一旦你鼠标hover在图像上，就会创建一个图像的克隆，然后克隆会动画化为模糊，当你将鼠标移出克隆的图像时，它会淡出并从DOM中删除。
这是一个演示： http ： //jsfiddle.net/mbFTk/93/
一个纯粹的JavaScript解决方案并不容易实现，你可以试试这个库：