页面滚动新闻标题样例

2017-6-2 liuweibo JavaScript

仿照页面滚动的新闻提示做了个例子

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta charset="utf-8">
	<style type="text/css">
	*{margin: 0;padding: 0}
		#scroll{
			width: 100%;
			height: 25px;
			line-height: 25px;
			overflow: hidden;
		}
		li{line-height: 30px}
	</style>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.js"></script>
</head>
<body>
	<div id="scroll">
		<ul style="margin-top: 0">
			<li>1.新闻1</li>
			<li>2.新闻2</li>
			<li>3.新闻3</li>
			<li>4.新闻4</li>
		</ul>
	</div>
	<script type="text/javascript">
		setInterval(function(){
			autoScroll("#scroll")
		},2000)
		function autoScroll(obj){
			$(obj).find("ul").animate({marginTop:"-30px"},500,function(){
				$(this).css({marginTop:"0px"}).find("li:first").appendTo(this);
			});
		}
	</script>
</body>
</html>

分享到： QQ空间新浪微博腾讯微博微信更多

« TortoiseSVN文件夹没有绿色对号(√)的解决方案. | Thinkphp3.2+PHPQRCode 二维码生成示例»

页面滚动新闻标题样例

日历

存档

最新评论

链接

搜索