看到这种什么百叶窗的动画，以为都是闪光实现的，最近突然灵光一闪，想到了用射流研究…实现（虽然我不是做前端的，本人做。净额).代码虽然实现了，但是比较乱，先上个图：

一个射流研究…的动画，以前以为只有闪光可以实现

代码主要就是一些数学的计算，然后结合html，css打造出类似闪光的效果。

下面贴出主要的部分代码：

函数all(books){ for(var I=；iself . Rowsi){ for(var j=；j。自我专栏；j ) {if(！书籍[i][j])返回false} }返回真}函数重置图书(books){ for(var I=；iself . Rowsi){ for(var j=；j。自我专栏；j){ books[I][j]=false；} }返回true}var self=this，timer=null，_ iin dex=；var initdir=[[[，]，[，]]，[[-，]，[，]，]，[，-]，[-，]，[，-]，[，-]，[，]，[，]，[，-]，[，]，[-，]，dir=initdir[]；定义变量权重=[,];var initpos=[[{x:y:-}]，[{x:self.columns，-y :-}]，[{x:self.columns，-y : self。row }]，[{ x : self。row }]，[{x:self.columns/，y : self。row/}]；timer=setInterval(function(){ var n=[]；对于(var I=；我自己。预测。长度；i ){var _div=null，x=，y=；for(var j=；jdir . length j){ x=self . predivs[I].x dir[j][]；y=self.preDivs[i].y dir[j][]；if(x=y=x self。列本身。成排！自我。书籍[y][x]){ self。books[y][x]=true；_ div=self。zzdivstatck[y][x]；n.push({x:x，y :y })；_ div。风格。背景图像=' URL(' self。zzi法师[_ iin dex]')'；_ div。风格。背景位置x=(-x * self。zzdivw)' px '；_ div。风格。背景位置=(-y * self。zzdivh)' px '；} } } self。predivs=n；如果(所有(自我。books)){ resetBooks(self。书籍)；var _r=util.randomWeight(重量);自我。predivs=init pos[_ r]；dir=initdir[_ r]；_ iindex} if(_ iindex=self。zzi法师。长度){ _ iindex=；}},);以上代码是使用爪哇岛描述语言实现的百叶窗动画效果，希望对大家有所帮助！