JavaScript实现新闻列表上下移动效果

最新推荐文章于 2021-04-15 15:19:23 发布

栗子的猫

最新推荐文章于 2021-04-15 15:19:23 发布

阅读量809

点赞数

分类专栏： js 文章标签：列表移动端后台列表页

本文链接：https://blog.csdn.net/lizidemao/article/details/83751839

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

<!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>
</head>
<body>
<ul id="ul1">
    <li>
        <span>newlist111111</span>
        <a href="javascript:;" class="prev">上移</a>
        <a href="javascript:;" class="next">下移</a>
    </li>
    <li>
        <span>newlist111111</span>
        <a href="javascript:;" class="prev">上移</a>
        <a href="javascript:;" class="next">下移</a>
    </li>
    <li>
        <span>newlist111111</span>
        <a href="javascript:;" class="prev">上移</a>
        <a href="javascript:;" class="next">下移</a>
    </li>
    <li>
        <span>newlist111111</span>
        <a href="javascript:;" class="prev">上移</a>
        <a href="javascript:;" class="next">下移</a>
    </li>
</ul>


<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>
</body>
</html>

栗子的猫

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
JavaScript实现新闻列表上下移动效果

&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt;&lt;meta charset="utf-8"&gt;&lt;title&gt;JavaScript实现新闻列表上下移动效果&lt;/title&gt;&lt;style&gt;* {margin:0; padding:0; list-style:none;}#ul1 {w
复制链接

扫一扫