原生射流研究…实现百叶窗效果及原理介绍

百叶窗大家都见过吧！如图：

原理：

如图所示，空心格子就好比是每个李，给它设定相对定位属性，设置飞越：隐藏；黑块为里子元素，高度为里的2倍，设置绝对的属性，我们正是要改变它的顶端值从而获得变化！（右上角多余块与本图无关)

布局分析：

注意顶端值得变化！默认top=0时候，显示的"一楼上铺",当top=-40px时候，李的子元素上移40px，这时候显示的内容就为"一楼下铺"注意p元素的包裹层差异

射流研究…分析：1、要开多个定时器来达到效果2、执行相反方向3、执行多组运动4、累加产生错落感5、产生时间间隔的动画射流研究…代码如下：

脚本窗口。onload=function(){ var OUl=document。getelementbyid(' ul1 ')；var oul 2=文档。getelementbyid(' ul2 ')；托绍(OUl)；//每四秒执行一次setTimeout(函数(){ ToShow(OUl 2)；},4000);函数toShow(obj){ var ADiv=obj。getelementsbytagname(' div ')；var Inow=0；定义变量计时器=nullvar bBtn=真；setInterval()函数(){要更改()；},2000);要更改的函数(){ timer=setInterval(function(){ if(iNow==ADiv。长度){ clearInterval(计时器))；iNow=0；bBtn=！bBtn } else if(bBtn){ start move(ADiv[Inow]，{top:0}，function(){ var p=document。getelementsbyclassname(' p-2 ')；for(var I=0；ip.lengthI){ p[I]。风格。背景='红色'；} });iNow} else{ startMove(aDiv[iNow]，{ top :-30 })；iNow} }，100)；} } };//运动框架函数startMove(obj，json，endFn){ clearInterval(obj。计时器)；物体。timer=setInterval(function(){ var bBtn=true；for(JSON中的var attr){ var ICur=0；iCur=parseInt(getStyle(obj，attr))| | 0；var isPeed=(JSON[attr]-IcuR)/8；iSpeed=iSpeed 0？数学天花板：数学地板；如果(iCur！=JSON[attr]){ BBtn=false；} obj。style[attr]=ICur isPeed ' px '；} if(bBtn){ clearInterval(obj。计时器)；if(endFn){ endFn。呼叫(obj)；} } },30);}//获取非行间样式函数getStyle(obj，attr){ if(obj。currentstyle){ return obj。current style[attr]；} else { return getComputedStyle(obj，false)[attr]；} }/脚本下载地址：js实现百叶窗效果以上就是本文的全部内容，希望对大家学习实现射流研究…百叶窗效果有所帮助。