PS:JS中用到的库是我开发的悦淘街的库,由于特殊原因此demo必须放到悦淘街页面下才可访问,大家可以使用其他类库替换,只是提供一个思路。运动函数可以看(JS手风琴特效、运动函数)这里的
<ul id="ulNode">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
<li>13</li>
<li>14</li>
</ul>
<button id="btn">click</button>
<script type="text/javascript">
Dom.Ready(function(){
var ulNode = Y.$("#ulNode"),liNodes = Y.getTagName(ulNode,"li"),len = liNodes.length;
var row = Math.floor(len/3);
var btnNode = Y.$("#btn"),con = null,num=0,j=0,v=0;
btnNode.onclick = function(){
con = setInterval(function(){
j= Math.ceil((num+1)/row);
moveTo(num,j);
num++;
if (num>=(len)) {
clearInterval(con);
};
},100);
};
function moveTo(n,j){
var leftP = (n%row)*50;
v = j-1;
Y.startMove(liNodes[n],{
left:leftP,
top:v*50
});
};
});
</script>