基于jquery的文字向上跑動

m8gy 10年前發布 | 1K 次閱讀 JavaScript

想實現一個類似跑馬燈的效果,發現跑馬燈有空格.效果也不美觀,于是用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()  
        }

 本文由用戶 m8gy 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
 轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
 本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！