实现通知滚动效果

 

function startScroll(){
    var dota1 = $("#dota1");
    var ta_tc1 = dota1.find("ul");
    if(dota1.size()==0){return false;}
    var scroll=function(uls){
        //复制一次内部的li
        var li_h=uls.eq(0).find("li").outerHeight();
        this.copy=function(){
            uls.each(function(){
                var lis=$(this).find("li");
                $(this).append(lis.clone());
                $(this).attr("li_s",lis.size()*2);
                $(this).attr("cur_li",lis.size()*2-1);
            });
        }
        this.copy();
        var timer=null;//滚动的超时时间
        var i=0;
        //开始滚动ul数组
        function start(i){
            var cur_ul=uls.eq(i);
            if(cur_ul){
                cur_ul.animate({scrollTop:cur_ul.scrollTop()+li_h},function(){
                    var cur_li=parseInt(cur_ul.attr("cur_li"));
                    var li_s=parseInt(cur_ul.attr("li_s"));
                    cur_li--;
                    if((li_s/2-1)==cur_li){
                        cur_ul.attr("cur_li",li_s-1);
                        $(this).scrollTop(0);
                    }else{
                        cur_ul.attr("cur_li",cur_li);
                    }
                    //start(++i);
                });
            };
        }
        timer=setInterval(function(){start(i);},3000);
    }
    scroll(ta_tc1);
}

 

 

   前端JSP页面

<div id="dota1">
<ul class="ta_tc">
    <c:forEach items="${model}" var="msg">
    <li class="clearfix">
    <p class="fr mt10">
    <font color="#999999">
    <fmt:formatNumber type="number" value="${msg.misstime}" maxFractionDigits="0">
    </fmt:formatNumber>
        ${msg.suffix }之前
    </font></p>
    <p class="pic">
    <img src="<%=base %>/images/news.gif" alt="某某通知"/></p>
    <p class="desc">${msg.title}&nbsp;&nbsp;
    <a target="_blank" href="<%=base%>/details?tid=${msg.tid}">查看详情 >></a>
    </li>
    </c:forEach>
    </ul>
</div>