关于jQuery的appand()和prepend()方法的小技巧

Posted 2020-08-19

最近工作上有个需求是要求一个自动向上滚动的列表，表有很多行，但只显示一行，每次滚动一行。很简单的一个功能，代码如下

<div class="scroll-area">
            <ul class="list1">
                <li>
                    <span class="phoneNum">111111111</span>
                    <span class="award">101</span>
                </li>
                <li>
                    <span class="phoneNum">222222222</span>
                    <span class="award">102</span>
                </li>
                <li>
                    <span class="phoneNum">333333333</span>
                    <span class="award">103</span>
                </li>
                <li>
                    <span class="phoneNum">444444444</span>
                    <span class="award">104</span>
                </li>
            </ul>
        </div>

.scroll-area {
    height:40px;
    overflow:hidden;
    background-color:#fff4d7;
    width:88%;
    margin:0 auto;
    border-radius:99px;
}
.scroll-area>ul {
    margin:0;
    padding:0;
    font-size:15px;
    color:#9b520b;
    position:relative;
    top:-40px;
}
.scroll-area>ul>li {
    padding:9px 18px;
}
.scroll-area>ul>li>span {
    vertical-align:sub;
}
.scroll-area>ul>li .award {
    float:right;
}

function Scroll(height,num){
    var a = $(‘.scroll-area>ul>li‘).slice(0,num);
    $(‘.scroll-area>ul‘).animate({top:-height*num},1000,function(){$(‘.scroll-area>ul‘).append(a).css(‘top‘,‘0‘);});
}

$(document).ready(function(){
    var interval = setInterval(function(){Scroll(‘40‘,1)},3000);
})

解释下，每一行高度40px，然后把第一个li转为jquery变量a，做一个ul整体上移40px的动画后再把a变量appand到ul的末尾，再把ul的高度重制为0（这段不是动画）

原本以为还需要再把第一个li删除的，但是其实会自动将dom变量或者jQuery变量从原来的位置抽离，放到新的位置

那么既然了解了这个小特性，利用appand和prepend这两个方法的便利，那些自动轮播滚动的页面特效就方便多了。

也许是我孤陋寡闻了，我也是新手，毕竟第一次发现这个特性，所以下来记录下