如何在javascript/jquery中應用運動模糊？

我想知道如何在javascript/jquery中製作運動模糊。我有一個水平畫廊，我想在圖像移動時應用運動模糊。實際上，它的工作方式非常完美：帶有運動模糊（photoshop）的疊加圖像和不透明度取決於圖像的速度。渲染看起來不錯，但我需要加載2倍所有的圖像，它很爛。在HTML：如何在javascript/jquery中應用運動模糊？

<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>

來源

2012-03-09 Tib

有純JS，本身做沒有實際的辦法。你可以使用畫布。儘管如此，你擁有的方法應該可以做到。如果你想減少圖像的數量，你可以讓它們（有點）精靈：圖像兩倍高，頂部=正常，底部=模糊。然後將圖像設置爲背景圖像，並在兩者之間進行垂直位置切換。 – isotrope 2012-03-09 18:04:00

@isotrope看起來像Tib想要做的就是在圖庫滾動時替換圖像。沒有什麼花哨。 – 2012-03-09 18:08:55

這是一個很好的問題，所以我不確定它爲什麼被低估。：/ – 2013-02-21 03:32:39

純JavaScript的解決方案不是那麼容易實現，你可以試用一下這個庫反正：

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

來源

2012-03-09 18:03:47

您可以使用絕對定位和不透明度創建通過在相同的圖像上疊加相同的圖像來模糊效果。下面是一個簡單的演示，這可能不是你想要的效果，但它可以得到亞開始：

$('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-09 18:22:36 Jasper

還有一個問題：它看起來原始圖像不會淡出，而新的圖像變淡 – 2013-02-21 03:25:49

我在Windows上測試該谷歌瀏覽器，和原來的圖像不會淡出，而克隆的圖像中消失。有沒有辦法糾正這個問題？ – 2013-02-21 03:34:53

@AndersonGreen淡出原始圖像不是我發佈的代碼的一部分。你可以通過引用'this'來輕鬆添加代碼。例如：'$（this）.animate（{opacity：0.5}，500）'。然後，您必須在克隆的'mouseleave'事件處理程序中放置類似的代碼，以將不透明度添加回原始圖像。 – Jasper 2013-02-21 17:35:56

如何在javascript/jquery中應用運動模糊？

回答

相關問題