纯js+html和纯css+html制作手风琴效果_javascript技巧

  

      这是第一个
      
    

      这是第二个
      
    

      这是第三个
      
    

      这是第四个
      
    

      这是第五个
      
    

      这是第六个
      
  

function getStyle(obj,attr)//用此种方法获取样式中的属性
{
   if(obj.currentStyle)
   {
    return obj.currentStyle[attr];
   }
   else
   {
    return getComputedStyle(obj,false)[attr];
   }
}
function startMove(obj,json,fn)
{
    clearInterval(obj.timer);//清除定时器
    obj.timer=setInterval(function ()
    {
    var stop=true;
    for(var attr in json)
    {
           var iCur=0;
           if(attr=='opacity')
           {
             iCur=parseInt(parseFloat(getStyle(obj, attr))*100);//这里加parseInt是避免div的数值不稳定，在波动
           }
           else
          {
             iCur=parseInt(getStyle(obj, attr));
          }
           var iSpeed=(json[attr]-iCur)/8;
           iSpeed=iSpeed>0?Math.ceil(iSpeed):Math.floor(iSpeed);
          if(iCur!=json[attr])
          {
              stop=false;
          }
          if(attr=='opacity')
             {
              obj.style.filter='alpha(opacity:'+(iCur+iSpeed)+')';
              obj.style.opacity=(iCur+iSpeed)/100;
            }
          else
            {
               obj.style[attr]=iCur+iSpeed+'px';
            }
         
    }
    if(stop)
    {
     clearInterval(obj.timer);
     if(fn){fn();}
    }
   }, 30)
    
}