无间隙循环滚动

来源：互联网发布：搭建apache服务器性能编辑：程序博客网时间：2024/05/01 20:58
<!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