<!DOCTYPE html><html><head><meta charset="utf-8"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><title>练习无缝滚动</title><style type="text/css" media="screen"> * { margin: 0px; padding: 0px; /* 去掉所有标签的marign和padding的值 */} ul li{list-style: none;margin:10px;} a{text-decoration: none;} #moocBox { height: 144px; width: 400px; margin-left: 25px; margin-top: 10px; overflow: hidden; /* 这个一定要加，超出的内容部分要隐藏，免得撑高中间部分 */} </style><meta name="description" content=""><meta name="keywords" content=""><link href="" rel="stylesheet"></head><body><h3 id="moocTitle">最新课程<a href="#" target="_self">更多>></a> </h3> <div id="moocBox"> <ul id="con1"> <li><a href="#" >好好学习</a></li> <li><a href="#" >天天向上</a></li> <li><a href="#" >加油加油</a></li> <li><a href="#" >体会学习的乐趣</a></li> <li><a href="#" >谈谈你的想法</a></li> <li><a href="#" >你一定能成功</a></li> <li><a href="#" >坚持自己的梦想</a></li> <li><a href="#" >坚持到最后</a></li> </ul> <ul di="con2"> </ul> </div><script type="text/javascript"> var area = document.getElementById('moocBox'); var con1 = document.getElementById('con1'); var con2 = document.getElementById('con2'); var speed = 50; area.scrollTop = 0; con2.innerHTML = con1.innerHTML; function scrollUp(){ if(area.scrollTop >= con1.scrollHeight) { area.scrollTop = 0; }else{ area.scrollTop ++; } } var myScroll = setInterval("scrollUp()",speed); area.onmouseover=function(){ clearInterval(myScroll);}area.onmouseout=function(){ myScroll = setInterval("scrollUp()",speed); }</script></body></html>
添加回答
举报
0/150
提交
取消