首页 > 代码库 > 大脑洞开的 上移下移

大脑洞开的 上移下移



<!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=http://www.mamicode.com/"javascript:;" class="prev">上移</a> <a href=http://www.mamicode.com/"javascript:;" class="next">下移</a> </li> <li> <span>1.李克强:建良好生态环境向全民提供</span> <a href=http://www.mamicode.com/"javascript:;" class="prev">上移</a> <a href=http://www.mamicode.com/"javascript:;" class="next">下移</a> </li> <li> <span>2.江西涉贪9400万元官员移民后获刑</span> <a href=http://www.mamicode.com/"javascript:;" class="prev">上移</a> <a href=http://www.mamicode.com/"javascript:;" class="next">下移</a> </li> <li> <span>3.31个省级纪委书记平均57.6岁 逾6成异地调任</span> <a href=http://www.mamicode.com/"javascript:;" class="prev">上移</a> <a href=http://www.mamicode.com/"javascript:;" class="next">下移</a> </li></ul></body></html>

真是大脑洞开,哈哈

大脑洞开的 上移下移