当前位置：NixonLi博客 > Wordpress > 正文

JQuery单行文字滚动效果代码

2017-02-21 分类：Wordpress 阅读() 评论(0)

JQuery单行文字滚动代码如下:

<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
	function AutoScroll(obj){ 
	$(obj).find("ul:first").animate({ 
	marginTop:"-25px" 
	},500,function(){ 
	$(this).css({marginTop:"0px"}).find("li:first").appendTo(this); 
	}); 
	} 
	$(document).ready(function(){ 
	setInterval('AutoScroll("#callboard")',3000) 
	}); 
</script>

测试代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="UTF-8">
<title>JQuery单行文字滚动效果代码</title> 
<style type="text/css"> 
ul,li{margin:0;padding:0} 
#callboard{height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden} 
#callboard li{height:25px;padding-left:10px;} 
</style> 
</head> 
<body> 
<div id="callboard"> 
	<ul> 
		<li>这是公告标题的第一行</li> 
		<li>这是公告标题的第二行</li> 
		<li>这是公告标题的第三行</li> 
		<li>这是公告标题的第四行</li> 
		<li>这是公告标题的第五行</li> 
		<li>这是公告标题的第六行</li> 
		<li>这是公告标题的第七行</li> 
		<li>这是公告标题的第八行</li> 
	</ul> 
</div>
<script src="https://cdn.staticfile.org/jquery/1.8.3/jquery.min.js" type="text/javascript"></script> 
<script type="text/javascript"> 
	function AutoScroll(obj){ 
		$(obj).find("ul:first").animate({ 
			marginTop:"-25px" 
		},500,function(){ 
			$(this).css({marginTop:"0px"}).find("li:first").appendTo(this); 
		}); 
	} 
	$(document).ready(function(){ 
		setInterval('AutoScroll("#callboard")',3000) 
	}); 
</script>
</body> 
</html>

窗外天空

关注公众号『窗外天空』

获取更多建站运营运维新知！
互联网创业、前沿技术......

赞(0) 打赏

文章名称：《JQuery单行文字滚动效果代码》
文章链接：https://www.nixonli.com/22300.html
本站资源仅供个人学习交流，请于下载后24小时内删除，不允许用于商业用途，否则法律问题自行承担。

标签：jQuery 文字滚动

相关推荐

评论抢沙发

关注微信窗外天空
复制微信号
回顶部