關於jQuery的appand()和prepend()方法的小技巧

標籤：phone   interval   ice   解釋   lis   read   tin   set   位置   

最近工作上有個需求是要求一個自動向上滾動的列表，表有很多行，但只顯示一行，每次滾動一行。很簡單的一個功能，代碼如下

<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這兩個方法的便利，那些自動輪播滾動的頁面特效就方便多了。

也許是我孤陋寡聞了，我也是新手，畢竟第一次發現這個特性，所以下來記錄下

 

關於jQuery的appand()和prepend()方法的小技巧