jquery 单行滚动、批量多行滚动、文字图片翻屏滚动效果代码

最新推荐文章于 2024-04-25 13:45:06 发布

mituan1234567

最新推荐文章于 2024-04-25 13:45:06 发布

阅读量1.1k

点赞数

分类专栏： JQuery

104 篇文章 1 订阅

订阅专栏

http://www.jb51.net/article/23526.htm

	<!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" c />
	<title>无标题文档</title>
	<style type="text/css">
	ul,li{margin:0;padding:0}
	#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
	#scrollDiv li{height:25px;padding-left:10px;}
	</style>
	<script src="http://img.jb51.net/jslib/jquery/jquery14.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("#scrollDiv")',1000)
	});
	</script>
	</head>
	<body>
	<div id="scrollDiv">
	<ul>
	<li>百度 www.baidu.com</li>
	<li>脚本之家 www.jb51.net</li>
	<li>这是公告标题的第三行</li>
	<li>这是公告标题的第四行</li>
	<li>这是公告标题的第五行</li>
	<li>这是公告标题的第六行</li>
	<li>这是公告标题的第七行</li>
	<li>这是公告标题的第八行</li>
	</ul>
	</div>
	</body>
	</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" c />
	<title>无标题文档</title>
	<style type="text/css">
	ul,li{margin:0;padding:0}
	#scrollDiv{width:300px;height:25px;line-height:25px;border:#ccc 1px solid;overflow:hidden}
	#scrollDiv li{height:25px;padding-left:10px;}
	</style>
	<script src="http://img.jb51.net/jslib/jquery/jquery14.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("#scrollDiv")',1000)
	});
	</script>
	</head>
	<body>
	<div id="scrollDiv">
	<ul>
	<li>百度 www.baidu.com</li>
	<li>脚本之家 www.jb51.net</li>
	<li>这是公告标题的第三行</li>
	<li>这是公告标题的第四行</li>
	<li>这是公告标题的第五行</li>
	<li>这是公告标题的第六行</li>
	<li>这是公告标题的第七行</li>
	<li>这是公告标题的第八行</li>
	</ul>
	</div>
	</body>
	</html>

关注