Pengenalan kepada kesan dan prinsip bidai yang direalisasikan oleh kemahiran js_javascript asli

Semua orang pernah melihat bidai! Seperti yang ditunjukkan dalam gambar:

Prinsip:

Seperti yang ditunjukkan dalam rajah, grid berongga adalah seperti setiap li Tetapkan atribut kedudukan relatif untuknya dan tetapkan limpahan:tersembunyi blok hitam ialah sub-elemen li, dan ketinggian adalah dua kali tinggi li. Tetapkan atribut mutlak Kami adalah untuk menukar nilai tertingginya untuk mendapatkan perubahan! (Blok tambahan di penjuru kanan sebelah atas tiada kaitan dengan gambar ini)

Analisis reka letak:

Perhatikan bahawa pakaian atas patut ditukar! Secara lalai, apabila top=0, paparan ialah "Pukal di tingkat pertama". . Perhatikan div lapisan pembalut bagi elemen p

Analisis JS:

1. Anda perlu menghidupkan berbilang pemasa untuk mencapai kesan
2. Laksanakan arah bertentangan
3. Lakukan beberapa set latihan
4. Pengumpulan menimbulkan rasa terkehel
5. Hasilkan animasi selang masa
Kod JS adalah seperti berikut:

<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 &#63; 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>

Alamat muat turun:

js untuk mencapai kesan bidai Di atas adalah keseluruhan kandungan artikel ini Saya harap ia akan membantu semua orang dalam pembelajaran untuk mencapai kesan js blinds.