欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

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

程序员文章站 2022-03-21 18:21:03
...
本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果,供大家参考,具体内容如下

一、纯css+html的手风琴效果

这种用css写的手风琴比较简单,主要是应用到css中的,transition属性。

代码如下:




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

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

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

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

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

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

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

二、纯js+html制作手风琴

这个手风琴出现一个问题,就是单独移动每个li时,没问题,但是当移动很快时,最右边的li出现空隙。我感觉是定时器的问题,就是当每个li还没回到自己的位置时,下一个li就开始运动了。但我定时器已经关了啊。

麻烦哪位给我留言,帮我看看怎么改哈!

代码如下:




手风琴效果
  • 这是第一个 纯js+html和纯css+html制作手风琴效果_javascript技巧
  • 这是第二个 纯js+html和纯css+html制作手风琴效果_javascript技巧
  • 这是第三个 纯js+html和纯css+html制作手风琴效果_javascript技巧
  • 这是第四个 纯js+html和纯css+html制作手风琴效果_javascript技巧
  • 这是第五个 纯js+html和纯css+html制作手风琴效果_javascript技巧
  • 这是第六个 纯js+html和纯css+html制作手风琴效果_javascript技巧

perfectMove2.js代码如下:

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)
    
}

以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。