<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="智能社 - zhinengshe.com" />
<meta name="copyright" content="智能社 - zhinengshe.com" />
<title>智能社 - www.zhinengshe.com</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 aLi=oUl.children;
for (var i=0; i<aLi.length; i++)
{
aLi[i].setAttribute(‘index‘, i);
var aA=aLi[i].getElementsByTagName(‘a‘);
var oPrevBtn=aA[0];
var oNextBtn=aA[1];
oPrevBtn.onclick=function (){
var n=this.parentNode.getAttribute(‘index‘);
if (n==0)
{
alert(‘已经是最上面了‘);
return;
}
var oLi1=this.parentNode;//当前元素的父元素，即当前的li
var oLi2=oUl.children[n-1];//当前元素的父元素的下一个兄弟元素，即当前的Li的兄弟li
oUl.insertBefore(oLi1, oLi2);
// 换下标
var n2=oLi2.getAttribute(‘index‘);
oLi1.setAttribute(‘index‘, n2);
oLi2.setAttribute(‘index‘, n);
};
oNextBtn.onclick=function (){
var oLi1=this.parentNode;
var n1=parseInt(oLi1.getAttribute(‘index‘));
if (n1==aLi.length-1) // 最后一个
{
alert(‘当前已经是最后一个了‘);
return;
}
else if (n1==aLi.length-2) // 倒数第二个
{
var oLi2=aLi[aLi.length-1];
var n2=oLi2.getAttribute(‘index‘);
oLi2.setAttribute(‘index‘, n1);
oLi1.setAttribute(‘index‘, n2);
oUl.appendChild(oLi1);
}
else // n+2
{
var oLi2=aLi[n1+2];
var oNextLi=aLi[n1+1];
var oNextIndex=oNextLi.getAttribute(‘index‘);
oNextLi.setAttribute(‘index‘, n1);
oLi1.setAttribute(‘index‘, oNextIndex);
oUl.insertBefore(oLi1, oLi2);
}
};
}
};
</script>
</head>
<body>
<ul id="ul1">
<li>
<span>0.中央军委晋升四名上将 习大大颁命令状</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.江西涉贪9400万元官员移民后获刑</span>
<a href="javascript:;" class="prev">上移</a>
<a href="javascript:;" class="next">下移</a>
</li>
<li>
<span>3.31个省级纪委书记平均57.6岁 逾6成异地调任</span>
<a href="javascript:;" class="prev">上移</a>
<a href="javascript:;" class="next">下移</a>
</li>
</ul>
</body>
</html>
真是大脑洞开，哈哈
时间： 2024-10-10 00:16:08