标签：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()方法的小技巧
标签：phone interval ice 解释 lis read tin set 位置
原文地址：http://www.cnblogs.com/defu/p/6048416.html
