使用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是你的雷電效果的開始和它的寬度（你在x上動畫）。當然你可以在你的黑色上使用一些小的透明度

你可以在你的圖像上使用三個div：一個寬度爲x的黑色，一個寬度爲w的透明，另一個爲黑色，並且爲三個div設置動畫。