jquery - 使用 jquery 或 javascript 对网页的图像扫描仪效果

Question

我需要为网站开发一个部分，在该部分中我需要在所选图像上显示扫描仪类型的效果。

这将类似于：http: //blog.gabrieleromanato.com/2011/11/jquery-scanner-effect-on-a-slideshow/

我需要的是黑暗中的图像和图像上从左到右的垂直光效，我在光源下方显示图像的各个部分。一旦光穿过任何部分，它就会再次变暗。

请指教。

Answer 1

我看到两种选择，具体取决于您想要的浏览器支持，您可以在图像上的 div 中为 CSS 渐变设置动画，您的渐变类似于

linear-gradient(to right, black x%, transparent (x+w)%, black)

x 是闪电效果的开始，w 是宽度（您在 x 上进行动画处理）。当然，您可以在黑色上使用一些小透明度

您也可以在图像上使用三个 div：一个宽度为 x 的黑色，一个宽度为 w 的透明，另一个黑色到最后，并为三个 div 设置动画。