妙味——手风琴效果（均匀分配）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
<style>
*{margin: 0;padding: 0;}
.show-box{width: 600px;height: 300px;border: 1px solid #ccc;margin: 50px auto 0;overflow: hidden;}
#accordion{width: 600px;height: 300px;position: relative;left: 0;top: 0;}
#accordion li{width: 600px;height: 300px;position: absolute;top: 0;list-style-type: none;}
.no1{background-color: #0099FF}
.no2{background-color: #00CCFF}
.no3{background-color: #00FFFF}
.no4{background-color: #00FF33}
.no5{background-color: #FF99CC}
</style>
<script src="http://files.cnblogs.com/baixc/move.js" charset="utf-8"></script>
<script>
window.onload=function()
{
    var oUl=document.getElementById('accordion');
    var aLi=oUl.getElementsByTagName('li');
    var _width=aLi[0].offsetWidth;
    var num=Math.ceil(_width/aLi.length);    //计算平均宽度
    var i=0;

    for(i=0;i<aLi.length;i++)
    {
        aLi[i].style.left=num*i+'px';
    }

    for(i=0;i<aLi.length;i++)
    {
        aLi[i].index=i;
        aLi[i].onmouseover=function()
        {
            for(i=0;i<aLi.length;i++)
            {
                if(i <= this.index)
                {
                    startMove(aLi[i],{left:i*50});
                }
                else
                {
                    startMove(aLi[i],{left:(_width-200)+(i-1)*50});
                }
            }
        };

        aLi[i].onmouseout=function()
        {
            for(i=0;i<aLi.length;i++)
            {
                startMove(aLi[i],{left:num*i});
            }
        };
    }
}
</script>
</head>
<body>
    <div class="show-box">
        <ul id="accordion">
            <li class="no1">1</li>
            <li class="no2">2</li>
            <li class="no3">3</li>
            <li class="no4">4</li>
            <li class="no5">5</li>
        </ul>
    </div>
</body>
</html>
效果如下图所示：
高否？富否？帅否？否？滚去学习！