<!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>
效果如下图所示：
