直接看<script>标签，想要鼠标悬浮暂停怎样实现不扰乱自动翻滚
<html>
<head>
<title>文字的无缝滚动</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
font-size: 12px;
line-height: 24px;
}
a{
text-decoration: none;
color:#333;
}
a:hover{
color:#ff0000;
}
ul {
list-style: outside none none;
}
#mooc{
width: 399px;
margin: 50 auto 0;
border: 5px solid #BBBBBB;
box-shadow: 2px 2px 10px #ababab;
border-radius: 15px;
}
#mooc_head{
height: 60px; /* Safari 5.1 - 6.0 */
background: -webkit-linear-gradient(top, #f05e6f, #c9394a);
background: -moz-linear-gradient(center top,#f05e6f, #c9394a);
background: linear-gradient(to bottom, #f05e6f, #c9394a); /* Safari /* Firefox 3.6 - 15 /* 标准的语法 */
position: relative;
padding-left: 30px;
line-height: 60px;
font-size: 24px;
color:#FFFFFF;
border-radius: 8px 8px 0px 0px;
}
#mooc_head a{
right:10px;
bottom: 10px;
line-height: 30px;
color:white;
position: absolute;
font-size: 12px;
}
#moocbox{
height:150px;
overflow: hidden;
margin-left: 25px;
width:335px;
}
#moocbox ul li{
height: 24px;
}
#moocbox ul li a{
display:block;
color:black;
float:left;
height: 24px;
text-indent: 15px;
overflow: hidden;
width: 180px;
}
#moocbox ul li a:hover{
color:red;
}
#mooc span{
color:#999;
float: right;
}
</style>
</head>
<body>
<div id="mooc">
<h3 id="mooc_head">慕课网最新课程
<a href="#">更多>></a>
</h3>
<div id="moocbox">
<ul id="con">
<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>
</div>
</div>
<script type="text/javascript">
var box = document.getElementById("moocbox");
var con=document.getElementById("con");
con.innerHTML+=con.innerHTML;
box.scrollTop=0;
var liHeight=24;//li的高度
var speed=50;
var delay=1000;
function startMove(){
box.scrollTop++;
// console.log(box.scrollTop);
time=setInterval(scrollUp,speed);
}
function scrollUp () {
if(box.scrollTop%liHeight==0){
clearInterval(time);
setTimeout(startMove,delay);
}else{
box.scrollTop++;
if(box.scrollTop >= box.scrollHeight/2){
box.scrollTop=0;
}
}
}
setTimeout(startMove,delay);
// box.onmouseover=function(){
// clearInterval();
// }
// box.onmouseout=function(){
// startMove();
// }
</script>
</body>
</html>慕郎_莲华
相关分类