×

基于jQuery实现的文字向上跑马灯

作者:abc1232018.03.23来源:Web前端之家浏览:11657评论:0
关键词:JQueryJS

基于jQuery实现的文字向上跑马灯效果。

<div class="recordList"> 
    <ul class="tpl-rotate-recordList" style="margin-top: 0px;"> 
        <li class="tpl-rotate-recordList-item"> 
        恭喜187****5204获得1000RBM 
        </li> 
        <li class="tpl-rotate-recordList-item"> 
        恭喜137****1372获得1000RBM 
        </li> 
        <li class="tpl-rotate-recordList-item"> 
        恭喜156****0276获得1000RBM 
        </li> 
        <li class="tpl-rotate-recordList-item"> 
        恭喜139****9856获得1000RBM 
        </li> 
        <li class="tpl-rotate-recordList-item"> 
        恭喜136****0580获得1000RBM 
        </li> 
        <li class="tpl-rotate-recordList-item"> 
        恭喜136****0580获得1000RBM 
        </li> 
        <li class="tpl-rotate-recordList-item"> 
        恭喜138****8118获得1000RBM 
        </li> 
        <li class="tpl-rotate-recordList-item"> 
        恭喜136****5555获得1000RBM 
        </li> 
        <li class="tpl-rotate-recordList-item"> 
        恭喜136****0580获得1000RBM 
        </li> 
        <li class="tpl-rotate-recordList-item"> 
        恭喜136****0580获得1000RBM 
        </li> 
    </ul> 
</div>
js代码
/*自动轮换xuyw*/ 
var AutoScroll = function(a) { 
    $(a).find("ul:first").animate( { 
    marginTop : "-20px" 
    }, 500, function() { 
    $(this).css( { 
    marginTop : "0px" 
    }).find("li:first").appendTo(this) 
    }) 
    } 
    if ($(".recordList ul li").length > 0) { 
    setInterval('AutoScroll(".recordList")', 2000) 
    } else { 
    $(".recordList").hide() 
}

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/svg1487174400716.html

网友评论文明上网理性发言 已有0人参与

发表评论: