Question

我正在为一家公司工作，并在html5中转换flash广告横幅。

我需要转换从左侧滑入的闪光图像，同时它像风大风一样执行动态模糊效果。

我已在图片中转换幻灯片，但我不确定如何添加刮风效果。

以下是我要复制的car image，这是我的代码jsfiddle 提前谢谢。

HTML

<div id = "wrapper" >       
 <div id="mainContainer">
    <div id="text">
        <img id="Image_Car" src="http://i.share.pho.to/c43dc6d7_o.png" />
    </div>  
 </div>
</div>

CSS

#wrapper {
    left: 50px;
    top: 50px;
    width: 300px;
    height:250px;
    position: absolute;
}
#mainContainer {
    background: url('https://secure-ds.serving-sys.com/BurstingRes/Site-8188/Type-0/5fefb401-b187-4d82-b4db-cbd2ef29cc48.gif');
    width:300px;
    height:250px;
    overflow: hidden;
    position: absolute;
}
#Image_Car {
    position:absolute;
    overflow: hidden;
    margin:60px 8px;
    left: -120px;
}

的jQuery

 $(document).ready(function () {
     bannerAnimation();
 });

 function bannerAnimation() {
     //Jquery Animation
     $("#Image_Car").animate({
         left: "30"
     }, 500, function () {
         $("#Image_Car").animate({
             left: "10"
         }, 200);
     });
 }

Answer 1

除非你使用几乎没有人用来制作广告的画布，否则Jquery不会帮你创建动态模糊，

或，

您可以创建多个图像实例并放置在同一个位置，然后以微小的时间间隔和不透明度为每个图像设置动画。

Answer 2

这是非常好的插件： DEMO

plugin

Jquery运动模糊

2 个答案: