基于jquery的文字向上跑动_jquery 让文字在div里面移动-优快云博客

本文链接：https://blog.youkuaiyun.com/xuyw10000/article/details/21876687

本文介绍了一种使用jQuery实现跑马灯效果的方法。通过自动滚动列表项来展示一系列获奖信息，实现了平滑过渡且美观的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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