• 欢迎访问窗外天空网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站
  • 本站兼容IE9+,谷歌Chrome,火狐Firefox等主流浏览器

JQuery单行文字滚动效果代码

Wordpress nixon li 100次浏览 0个评论 扫描二维码

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

<script src="http://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="http://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>
代码演示
版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明JQuery单行文字滚动效果代码
喜欢 ( 0)
微信扫码
支付宝扫码
分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

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