百葉窗分析

時間 2019-12-08

標籤百葉窗分析简体版

原文原文鏈接

空心格子就比如是每一個li，給它設定相對定位屬性，設置overflow:hidden；黑塊爲li子元素，高度爲li的2倍，設置absolute屬性，咱們正是要改變它的top值從而得到變化！json

佈局分析：框架

注意top值得變化！默認top=0時候，顯示的「一樓上鋪」，當top=-40px時候，li的子元素上移40px，這時候顯示的內容就爲「一樓下鋪」注意p元素的包裹層div佈局

JS分析：
一、要開多個定時器來達到效果
二、執行相反方向
三、執行多組運動
四、累加產生錯落感
五、產生時間間隔的動畫
JS代碼以下：動畫

 
         <script> 
        
         window.onload =  
         function 
         (){ 
        
         var 
         oUl = document.getElementById( 
         'ul1' 
         ); 
        
         var 
         oUl2 = document.getElementById( 
         'ul2' 
         ); 
        
         toShow(oUl); 
        
         //每四秒執行一次 
        
         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);      
        
         }     
        
         }    
        
         }; 
        
         //運動框架 
        
         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);  
        
         } 
        
         //獲取非行間樣式 
        
         function 
         getStyle(obj,attr){ 
        
         if 
         (obj.currentStyle){ 
        
         return 
         obj.currentStyle[attr]; 
        
         } 
        
         else 
         { 
        
         return 
         getComputedStyle(obj, 
         false 
         )[attr]; 
        
         } 
        
         } 
        
         </script>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。