本文分享了纯js+html制作手风琴和纯css+html制作手风琴两种效果，供大家参考，具体内容如下
一、纯css+html的手风琴效果
这种用css写的手风琴比较简单，主要是应用到css中的，transition属性。
代码如下：

二、纯js+html制作手风琴
这个手风琴出现一个问题，就是单独移动每个li时，没问题，但是当移动很快时，最右边的li出现空隙。我感觉是定时器的问题，就是当每个li还没回到自己的位置时，下一个li就开始运动了。但我定时器已经关了啊。
麻烦哪位给我留言，帮我看看怎么改哈！
代码如下：
手风琴效果 这是第一个 这是第二个 这是第三个 这是第四个 这是第五个 这是第六个

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程序设计有所帮助。