如何同时动画（）图像的一部分？答案

【问题标题】：How to animate() simultaneously portions of an image?如何同时动画（）图像的一部分？
【发布时间】：2013-10-17 12:00:51
【问题描述】：

我想对我的标题幻灯片做一个特殊的效果。我已经完成了通过将旧图像淡入新图像来滑动几张图像的部分。

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

在幻灯片中的图像淡入到下一个图像之间（大约 5 秒），我想随机改变显示图像的亮度。但是，我希望亮度在相同大小的部分中随机变化（宽度=125px；高度=100px）。

我认为我可以在 z-index: 10 中拥有我的活动图像；和 z-index:9 中的全白背景；然后改变活动 img 的不透明度会起到一定的作用（除了它只会变得更清晰，永远不会更暗）。

但是没有办法做这样的事情：$active.animate({opacity: Math.random()*0.7}, {coords1, coords2, coords3, 持续时间： Math.random()*200 ，队列： false });

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

谁有更好的主意来解决我的问题？

提前谢谢你。

【问题讨论】：

【解决方案1】：

我发现了一个便宜的技巧，可以为我完成这项工作。

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

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

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

如果有人愿意做同样的效果，我希望这会有所帮助。

【讨论】：