jquery实现滚动新闻播报，超简短 - 静夜沉思

作者在 2016-08-09 20:26:52 发布以下内容

太短了，我都佩服我自己了。原理就是不停的把第一条放到最后，然后向前滚动一条。

<style>
	.container{position:relative; height:30px; width:200px; overflow:hidden; border:1px solid #333;}
	.news{position:absolute; top:0; margin:0;}
	.news li{line-height:30px;}
</style>
<div class="container">
	<ul class="news">
		<li><a href="###">第一条新闻</a></li>
		<li><a href="###">第二条新闻</a></li>
		<li><a href="###">第三条新闻</a></li>
	</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	$(document).ready(function () {
		var $news = $(".news");
		var $li_height = $news.find("li").height();
		setInterval(function () {
			$news.animate({top: -$li_height}, 500, function () {
				$news.css({top: 0});
				$news.append($news.find("li:first-child"));
			});
		}, 1000);
	});
</script>

上面是最简单的实现，便于需要的朋友一眼就能看懂原理，下面是加了鼠标悬停效果和把逻辑代码放进闭包的

<style>
	.container{position:relative; height:30px; width:200px; overflow:hidden; border:1px solid #333;}
	.news{position:absolute; top:0; margin:0;}
	.news li{line-height:30px;}
</style>
<div class="container">
	<ul class="news">
		<li><a href="###">第一条新闻</a></li>
		<li><a href="###">第二条新闻</a></li>
		<li><a href="###">第三条新闻</a></li>
	</ul>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script>
	$(document).ready(function () {
		(function () {
			var $news = $(".news");
			var $li_height = $news.find("li").height();
			var $pause = false;
			setInterval(function () {
				if (!$pause) {
					$news.animate({top: -$li_height}, 500, function () {
						$news.css({top: 0});
						$news.append($news.find("li:first-child"));
					});
				}
			}, 1000);
			$news.hover(function () {
				$pause = true;
			}, function () {
				$pause = false;
			});
		})();
	});
</script>