Everyone has seen the blinds! As shown in the picture:
principle:
As shown in the figure, a hollow lattice is like each li. Set relative positioning attributes for it and set overflow:hidden; the black block is a li child element with a height of 2 times the li, and set the absolute attribute. We want to change its top value to obtain changes! (The extra block in the upper right corner has nothing to do with this picture)
Layout analysis:
Note that top is worth changing! When the default top=0 is 0, the "first floor upstairs" is displayed. When top=-40px, the child elements of li are moved up to 40px. At this time, the content displayed is "first floor downstairs". Note the p-element layer div
JS Analysis:
1. Turn on multiple timers to achieve the effect
2. Execute in the opposite direction
3. Perform multiple sets of exercises
4. Accumulation creates a sense of staggering
5. Generate time interval animation
The JS code is as follows:
<script> window.onload = function(){ var oUl = document.getElementById('ul1'); var oUl2 = document.getElementById('ul2'); toShow(oUl); //Execute setTimeout(function(){ toShow(oUl2); },4000); function toShow(obj){ var aDiv = obj.getElementsByTagName('div'); var iNow = 0; var timer = null; var bBtn = true; setInterval(function(){ toChange(); },2000); function toChange(){ timer = setInterval(function(){ if(iNow==aDiv.length){ clearInterval(timer); iNow = 0; bBtn = !bBtn; } else if(bBtn){ startMove(aDiv[iNow],{top:0},function(){ var p = document.getElementsByClassName('p-2'); for(var i=0; i<p.length;i++){ p[i].style.background = 'red'; } }); iNow++; } else{ startMove(aDiv[iNow],{top:-30}); iNow++; } },100); } } } }; //Motion frame function startMove(obj,json,endFn){ clearInterval(obj.timer); obj.timer = setInterval(function(){ var bBtn = true; for(var attr in json){ var iCur = 0; iCur = parseInt(getStyle(obj,attr)) || 0; var iSpeed = (json[attr] - iCur)/8; iSpeed = iSpeed >0 ? Math.ceil(iSpeed): Math.floor(iSpeed); if(iCur!=json[attr]){ bBtn = false; } obj.style[attr] = iCur + iSpeed + 'px'; } if(bBtn){ clearInterval(obj.timer); if(endFn){ endFn.call(obj); } } } } } },30); } //Get non-line style function getStyle(obj,attr){ if(obj.currentStyle){ return obj.currentStyle[attr]; } else{ return getComputedStyle(obj,false)[attr]; } } </script>Download address: js to achieve blinds
The above is all about this article, and I hope it will be helpful for everyone to learn to realize the effect of js blinds.