Heim >Web-Frontend >js-Tutorial >Auf Jquery basierender Text läuft nach oben wie ein Laufschrift-Effekt_JQuery
Ich wollte einen Effekt erzielen, der einem Auswahlrahmen ähnelt, stellte jedoch fest, dass der Auswahlrahmen Leerzeichen enthielt. Der Effekt war nicht schön, also habe ich ihn mit jquery geschrieben
Seitencode
<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-Code
/*自动轮换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() }