0

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

我的标题幻灯片图像宽度=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 个变量。

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

先感谢您。

4

1 回答 1

0

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

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

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

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

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

于 2013-11-08T07:10:53.747 回答