HTML
<ul>
<li style="top: 0;">
<span>啦啦啦啦</span>
<i>1</i>
<input type="button" name="" id="" value="上移" />
<input type="button" name="" id="" value="下移" />
</li>
<li style="top: 50px;">
<span>哈哈哈哈</span>
<i>2</i>
<input type="button" name="" id="" value="上移" />
<input type="button" name="" id="" value="下移" />
</li>
<li style="top: 100px;">
<span>呱呱呱呱</span>
<i>3</i>
<input type="button" name="" id="" value="上移" />
<input type="button" name="" id="" value="下移" />
</li>
<li style="top: 150px;">
<span>小小小小</span>
<i>4</i>
<input type="button" name="" id="" value="上移" />
<input type="button" name="" id="" value="下移" />
</li>
</ul>
CSS
*{
margin: 0;
padding: 0;
}
ul{
position: relative;
}
li{
height: 50px;
position: absolute;
line-height: 50px;
/*margin: 10px 0;*/
left: 0;
}
li i{
font-style: normal;
}
JS
var Btn=document.getElementsByTagName("input");
var oUl=document.getElementsByTagName("ul")[0];
var timer=null;
for (var i=0;i<Btn.length;i++) {
Btn[i].index=i;
Btn[i].οnclick=function(){
var parent=this.parentNode;
var pre=this.parentNode.previousElementSibling;
var next=this.parentNode.nextElementSibling;
clearInterval(timer);
//获得和保存该元素父级的定位初始值,准备与变换的值进行对比,当差值等于50px时清除定时器,停止运动
var oldSpeed=parseInt(getStyle(parent,"top"));
if(this.index%2==0){
//上移
if(this.parentNode ==oUl.firstElementChild){
alert("到头了");
}else{
//元素交换
oUl.insertBefore(parent, pre);
timer=setInterval(function(){
//获得该元素的定位值
var speed=parseInt(getStyle(parent,"top"));
//上移定位置递减
speed--;
//获得此元素的上一个元素的定位值
var speed1=parseInt(getStyle(pre,"top"));
//下移定位置递增
speed1++;
//当差值等于50时清除定时器
if(oldSpeed-speed==50){
clearInterval(timer);
}
parent.style.top=speed+"px";
pre.style.top=speed1+"px";
},30)
}
}else{
//下移
if(this.parentNode == oUl.lastElementChild){
alert("到尾了");
}else{
//元素交换
oUl.insertBefore(parent,next.nextElementSibling);
timer=setInterval(function(){
//获得该元素的定位值
var speed=parseInt(getStyle(parent,"top"));
//下移定位值递增
speed++;
//获得此元素的上一个元素的定位值
var speed1=parseInt(getStyle(next,"top"));
//上移定位值递减
speed1--;
//当差值等于50时清除定时器
if(speed-oldSpeed==50){
clearInterval(timer);
}
parent.style.top=speed+"px";
next.style.top=speed1+"px";
},30)
}
}
}
}
function getStyle(obj,attr ){
if(obj.currentStyle){
return obj.currentStyle(attr);
}else{
return getComputedStyle(obj)[attr];
}
}