无间隙循环滚动

最新推荐文章于 2022-12-06 13:32:52 发布

我有一个小毛驴

最新推荐文章于 2022-12-06 13:32:52 发布

阅读量979

点赞数

分类专栏： html+css javascript 文章标签： HTML5 CSS3 javascript 循环滚动

本文链接：https://blog.csdn.net/liumingm_music/article/details/41702913

版权

html+css 同时被 2 个专栏收录

17 篇文章 0 订阅

订阅专栏

javascript

10 篇文章 0 订阅

订阅专栏

<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>无间隙循环滚动</title>
		<style type="text/css">
			body {
				font-size: 12px;
				line-height: 24px;
				text-algin: center;        /* 页面内容居中 */
			}
			* {
				margin: 0px;
				padding: 0px;            /*  去掉所有标签的marign和padding的值  */
			}
			ul {
				list-style: none;           /*  去掉ul标签默认的点样式  */
			}
			a {
				color: #333;
				text-decoration: none;     /* 超链接样式 */
			}
			a:hover {
				color: #ff0000;
			}
			#container {
				width: 399px;
				border: 5px solid #ababab;
				border-radius: 15px;
				box-shadow: 2px 2px 10px #ababab;
				margin: 50px auto 0;
				text-align: left;               /* 让新闻内容靠左 */
			}
			#mocc {
				height: 30px;
				width: 335px;
				margin-left: 25px;
				margin-top: 10px;
				overflow: hidden;   /*  这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */
			}
			#container ul li {
				height: 24px;
			}
			#container ul li a {
				width: 180px;
				float: left;
				overflow: hidden;
				text-indent: 15px;
				height: 24px;
			}
			#container ul li span {
				float: right;
				color: #999;
			}
		</style>
		
	</head>
	<body>
		<div id="container">
			<div id="mocc">
				<ul id="con1">
					<li><a href="#">1.学会html5 绝对的屌丝逆袭（案例）</a><span>2013-09-18</span></li>
					<li><a href="#">2.tab页面切换效果（案例）</a><span>2013-10-09</span></li>
					<li><a href="#">3.圆角水晶按钮制作（案例）</a><span>2013-10-21</span></li>
					<li><a href="#">4.HTML+CSS基础课程(系列)</a><span>2013-11-01</span></li>
					<li><a href="#">5.分页页码制作（案例）</a><span>2013-11-06</span></li>
					<li><a href="#">6.导航条菜单的制作（案例）</a><span>2013-11-08</span></li>
					<li><a href="#">7.信息列表制作(案例)</a><span>2013-11-15</span></li>
					<li><a href="#">8.下拉菜单制作(案例)</a><span>2013-11-22</span></li>
					<li><a href="#">9.如何实现“新手引导”效果</a><span>2013-12-06</span></li>
				</ul>
				<ul id="con2"></ul>
			</div>
		</div>
		<script>
			var area = document.getElementById('mocc');
			var con1 = document.getElementById('con1');
			var con2 = document.getElementById('con2');
			var speed = 50;//滚动的速度
			var delay = 2000;//间隙停留时间
			var ileight = 24;
			var myscroll;
			con2.innerHTML = con1.innerHTML;//复制节点，用于循环
			area.scrollTop = 0;
			//
			function startMove()
			{
				area.scrollTop++;
				myscroll = setInterval("scrollUp()",speed);
			}
			//
			function scrollUp()
			{
				if(area.scrollTop % ileight == 0)
				{
					clearInterval(myscroll);
					setTimeout("startMove()",delay);
				}
				else
				{
					area.scrollTop++;
					if(area.scrollTop >= area.scrollHeight/2)
					{
						area.scrollTop = 0;
					}
				}
			}
			//
			setTimeout("startMove()",delay);//初始化
		</script>

	</body>
</html>

我有一个小毛驴

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
无间隙循环滚动

无间隙循环滚动 body { font-size: 12px; line-height: 24px; text-algin: center; /* 页面内容居中 */ } * { margin: 0px; padding: 0px; /* 去掉所有标签的marign和padding的值 */
复制链接

扫一扫