浣犲彲浠ヤ娇鐢╦Query鐨刟nimate()鏂规硶鏉ュ疄鐜版枃瀛楃殑涓婁笅婊氬姩鏁堟灉銆備互涓嬫槸涓€涓ず渚嬩唬鐮侊細

HTML閮ㄥ垎锛?/p>

<div id="scrolling-text">
<ul>
<li>Lorem ipsum dolor sit amet</li>
<li>Consectetur adipiscing elit</li>
<li>Sed do eiusmod tempor incididunt</li>
<li>Ut labore et dolore magna aliqua</li>
<li>Ut enim ad minim veniam</li>
</ul>
</div>

CSS閮ㄥ垎锛?/p>

#scrolling-text {
height: 100px;
overflow: hidden;
}
#scrolling-text ul {
list-style-type: none;
padding: 0;
margin: 0;
}
#scrolling-text li {
line-height: 25px;
}

JavaScript閮ㄥ垎锛?/p>

$(document).ready(function() {
function scrollText() {
var firstItem = $('#scrolling-text ul li:first');
var height = firstItem.outerHeight();
firstItem.animate({ 'margin-top': -height }, 1000, function() {
$(this).css('margin-top', 0).appendTo('#scrolling-text ul');
});
}
setInterval(scrollText, 2000);
});

杩欎釜绀轰緥浠ｇ爜浼氭瘡闅?绉掗挓鍚戜笂婊氬姩涓€涓垪琛ㄩ」鐨勯珮搴︼紝鐒跺悗灏嗚鍒楄〃椤规斁鍒板垪琛ㄧ殑鏈熬锛屽疄鐜版枃瀛楃殑涓婁笅婊氬姩鏁堟灉銆備綘鍙互鏍规嵁闇€瑕佽皟鏁存粴鍔ㄧ殑鏃堕棿闂撮殧鍜屾粴鍔ㄧ殑楂樺害銆?/p>