你的位置:首页 > Java教程

[Java教程]关于jQuery的append()和prepend()方法的小技巧


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

<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变量append到ul的末尾,再把ul的高度重制为0(这段不是动画)

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

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

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