How to apply a motion-blur in javascript/jquery? [

问题:

This question already has answers here:

HTML5 Canvas Motion Blur effect? (2 answers)

Closed 7 years ago.

I'm wondering how to make a motion blur in javascript/jquery. I've an horizontal gallery and I want to apply the motion blur when the images are moving. Actually, It works perfectly with that way : an overlay image with a motion blur (photoshop) and the opacity varies depending to the speed of the images. The render looks pretty good but i need to load 2 times all my images and it sucks. In 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>

回答1:

You can use absolute positioning and opacity to create blur effects by stacking the same image on top of itself. Here's a quick demo, it's probably not the effect you want but it can get ya started:

$('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();
        });
    });      
});​

This creates a clone of the image once you mouse-over it, then the clone animates to a blur and when you mouse-out the cloned image, it fades-out and is removed from the DOM.

Here is a demo: http://jsfiddle.net/mbFTk/93/

回答2:

A pure javascript solution is not that easy to implement, you could give a try to this library anyway:

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