jQuery滚动一行停顿效果

AD: 双12期间发一枚优惠码,限量分享,先到先得。【我要上车】

直接上代码吧

<style>
html{margin:0 auto; padding:0;}
div,ul,ol,li{margin:0;padding:0;font-weight:normal;}
ul,ol,li,i{list-style:none; font-style:normal;}
.z{float:left;}
.y{float:right;}

a{color:#333333; text-decoration:none; outline:none;}
a:hover{color:#e8450a; text-decoration:underline; outline:none;}

/* site-topbar
------------------------------------------------------*/
.site-topbar{width:100%; margin:0 auto; height:40px; line-height:40px; z-index:30; color:#b0b0b0; background:#333}
.site-topbar a{color:#b0b0b0; text-decoration:none}
.site-topbar a:hover{color:#fff;}

.site-topbar #index-msg-box {height:40px; line-height:40px; overflow:hidden; padding:0 10px;}
.site-topbar i{line-height:40px;padding-right:8px;}
.site-topbar .ann_box{margin-left:20px;}
.site-topbar .ann_box li{height:40px; line-height:40px; overflow:hidden;}

#top-user-info ul{padding:0px; margin:0px;}
#top-user-info ul li{float:left; padding:0 0 0 5px;}
</style>
<link rel="stylesheet" href="http://yangjunwei.com/redirect/aHR0cDovL2FwcHMuYmRpbWcuY29tL2xpYnMvZm9udGF3ZXNvbWUvNC40LjAvY3NzL2ZvbnQtYXdlc29tZS5taW4uY3Nz" target="_blank" type="text/css" media="screen" />
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript">
	function autoScroll(obj){
		$(obj).find(".ann_box_list").animate({
			marginTop : "-35px"
		},500,function(){
			$(this).css({marginTop : "0px"}).find("li:first").appendTo(this);
		})
	}
	$(function(){
		setInterval('autoScroll(".ann_box")',3000)
	});
</script>
<div class="site-topbar">
	<div class="container">
		<div class="z" id="index-msg-box">
			<i class="z ann_box_ico fa fa-volume-up"></i>
			<div class="ann_box">
				<ul class="ann_box_list">
					<li><a href="http://yangjunwei.com" target="_blank">你只闻到我的香水, 却没看到我的汗水</li>
					<li>Connecting People.</li>
					<li>你有你的规则,我有我的选择</li>
				</ul>
			</div>
		</div>
	</div>
</div>

有兴趣的可以看一下示例:Demo演示

参与评论