4

javascript/jquery でモーション ブラーを作成する方法を知りたいです。水平ギャラリーがあり、画像が動いているときにモーション ブラーを適用したいと考えています。実際、それはその方法で完全に機能します。モーションブラー（フォトショップ）を使用したオーバーレイ画像で、画像の速度によって不透明度が異なります。レンダリングはきれいに見えますが、すべての画像を 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 に答える