欢迎光临
我们一直在努力

JQuery单行文字滚动效果代码

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小时内删除,不允许用于商业用途,否则法律问题自行承担。

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

非常感谢你的打赏,我们将继续给力更多优质内容,让我们一起创建更加美好的网络世界!

支付宝扫一扫打赏

微信扫一扫打赏

请先暂停浏览器上的广告屏蔽插件,或者更换浏览器打开即可!