如何动画()同时图像的部分?

时间:2013-10-17 12:00:51

标签: jquery image jquery-animate

我想对标题幻灯片显示特效。我已经完成了通过将旧图像淡入新图像来滑动多个图像的部分。

我的标题幻灯片图片宽度= 1000px;高度= 400像素;

在幻灯片显示中图像淡入下一个图像(大约5秒)之间,我想要随机改变显示图像的亮度。但是,我希望亮度在相同大小的部分中随机变化(宽度= 125像素;高度= 100像素)。

我以为我可以在z-index中拥有我的活动图像:10;和z-index中的全白背景:9;然后改变活动img的不透明度会做出一些伎俩(除了它只会变得更清晰,从不变暗)。

但是没有办法做这样的事情:$ active.animate({opacity:Math.random()* 0.7},{ coords1,coords2,coords3, duration:Math.random()* 200,queue:false});

可能解决方案是声明32个变量(根据我的img大小,它分为32个宽度= 125px的块;高度= 100px),每个变量包含一部分图像,然后同时改变每个的亮度。但对我来说似乎有点大胆,我不确定如何创建这32个变量。

任何人都有更好的想法来解决我的问题?

提前谢谢。

1 个答案:

答案 0 :(得分:0)

我找到了一个廉价的技巧,为我完成了这项工作。

基本上我使用的是淡入淡出的幻灯片,所以我做的是在顶部添加另一个类似的淡入淡出幻灯片,带有更高的z-index,但这次我准备了预定义的蒙版伪随机黑白方块。

我使用频率高于真实幻灯片的面具幻灯片放映,因此许多蒙版适用于同一图像,我将不透明度从0变为0.3,这有效地使白色方块上的图像变亮并使图像变暗黑色的。

通过给人一种随机改变图块中图像不透明度的印象来实现这一目的。

如果有人愿意做同样的事情,我希望这会有所帮助。