大脑洞开的上移下移

时间：2014-12-15 00:05:36 阅读：198 评论：0 收藏：0 [点我收藏+]

标签：style blog http io ar color sp for java


<!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>

真是大脑洞开，哈哈

大脑洞开的上移下移

标签：style blog http io ar color sp for java

原文地址：http://www.cnblogs.com/heboliufengjie/p/4163933.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行

大脑洞开的 上移下移

大脑洞开的上移下移