<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>原生JavaScript实现列表上下移动效果</title>
<style>
* {margin:0; padding:0; list-style:none;}
#ul1 {width:600px; margin:10px auto;}
#ul1 li {border:1px solid #CCC; padding:4px;}
#ul1 span {width:500px; display:inline-block;}
</style>
<script>
window.onload = function(){
var oUl = document.getElementById('ul1');
var aBtn = oUl.getElementsByTagName('a');
for(var i = 0;i<aBtn.length;i++){
if(i%2==0){
aBtn[i].onclick = function(){
var obj = this.parentNode;
if(obj == oUl.children[0]){
alert('已经到顶了');
return;
}
var oPrev = obj.previousElementSibling||obj.previousSibling;
oUl.insertBefore(obj,oPrev);
};
}else{
aBtn[i].onclick = function(){
var obj = this.parentNode;
if(obj == oUl.children[oUl.children.length-1]){
alert('已经到底了');
return;
}
var oNext = obj.nextElementSibling||obj.nextSibling;
var oNext2 = oNext.nextElementSibling||oNext.nextSibling;
oUl.insertBefore(obj,oNext2);
};
}
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>
<span>0.新华社北京5月26日电 中共中央政治局5月26日召开会议</span>
<a href="javascript:;" class="prev">上移</a>
<a href="javascript:;" class="next">下移</a>
</li>
<li>
<span>1.李克强为何如此牵挂棚改？这里有上亿人民的泪水和欢欣！</span>
<a href="javascript:;" class="prev">上移</a>
<a href="javascript:;" class="next">下移</a>
</li>
<li>
<span>2.不管您是吃甜粽子还是咸粽子，这些粽子都别买</span>
<a href="javascript:;" class="prev">上移</a>
<a href="javascript:;" class="next">下移</a>
</li>
<li>
<span>3.端午假期高速路不免费 北京明早京承京藏多条高速拥堵</span>
<a href="javascript:;" class="prev">上移</a>
<a href="javascript:;" class="next">下移</a>
</li>
</ul>
</body>
</html>
111.jpg
网友评论