jquery单行文字循环滚动js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery单行文字循环滚动js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<link type="text/css" href="css/zzsc.css" rel="stylesheet" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/zzsc.js"></script>
<title>jquery��������ѭ������</title>
</head>
<body>
<!-- ���� ��ʼ -->
<div class="box">
	<div class="t_news">
		<b>���²�����</b>
		<ul class="news_li">
			<li><a href="#" target="_blank">ˮ�����ߣ���ѥ�ӵ�è</a></li>
			<li><a href="#" target="_blank">�ֶ�ħ�� Plus</a></li>
			<li><a href="#" target="_blank">����ɱ�� ������</a></li>
			<li><a href="#" target="_blank">����Ա���ʦ�����Ա���</a></li>
			<li><a href="#" target="_blank">iphone��ֽ</a></li>
		</ul>
		<ul class="swap"></ul>
	</div>
</div>
<!-- ���� ���� -->
<style type="text/css">
.footer p{font:normal 12px/2em '΢���ź�';text-align:center;}
</style>
</body>
</html>

JS代码(zzsc.js):

// JavaScript Documentfunction b(){
	t = parseInt(x.css('top'));
	y.css('top','19px');
	x.animate({
	top:t - 19 + 'px'}
,'slow');
	//19为每个li的高度if(Math.abs(t) == h-19){
	//19为每个li的高度y.animate({
	top:'0px'}
,'slow');
	z=x;
	x=y;
	y=z;
}
setTimeout(b,3000);
	//滚动间隔时间 现在是3秒}
$(document).ready(function(){
	$('.swap').html($('.news_li').html());
	x = $('.news_li');
	y = $('.swap');
	h = $('.news_li li').length * 19;
	//19为每个li的高度setTimeout(b,3000);
	//滚动间隔时间 现在是3秒}
)

CSS代码(zzsc.css):

/* 转载请保留版权信息：懒人图库 www.lanrentuku.com */
*{padding:0;margin:0;font-size:12px}
ul,li{list-style:none;}
.box{height:35px;background:#000;overflow:hidden;}
.t_news{height:19px;background:url(../images/icon_top.png) 0 -88px no-repeat;color:#fff;padding-left:10px;margin:8px 0;overflow:hidden;position:relative;}
.t_news b{line-height:19px;font-weight:bold;display:inline-block;}
.news_li,.swap{line-height:19px;display:inline-block;position:absolute;top:0;left:72px;}
.news_li a,.swap a{color:#fff;}
.swap{top:19px;}

附件:下载该文件资源,减少时间成本(增值服务)