基于jquery的文字向上跑动详解编程语言

想实现一个类似跑马灯的效果,发现跑马灯有空格.效果也不美观,于是用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()   
        }  

原创文章,作者:ItWorker,如若转载,请注明出处:https://blog.ytso.com/8702.html

(0)
上一篇 2021年7月18日
下一篇 2021年7月18日

相关推荐

发表回复

登录后才能评论