                        課程
                    
                        /前端開發(fā)
                        
                            /JavaScript
                        
                        /信息滾動效果制作

求各位大神指點

怎么給間歇性循環(huán)滾動加鼠標移入停止，移出繼續(xù)滾動的效果？？

咿呀咿呀噠噠

2016-09-01

源自：信息滾動效果制作 3-3

關(guān)注問題我要回答

453

操作

收起

1 回答

李小希
2016-09-01

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>無標題文檔</title>
<style>
*{
?? ?margin:0;
?? ?padding:0;
?? ?}
#mooc{
?? ?width:200px;
?? ?height:78px;
?? ?}
#moocTitle{
?? ?width:200px;
?? ?height:30px;
?? ?background:#f00;
?? ?}
#moocBox{
?? ?width:200px;
?? ?height:48px;
?? ?overflow:hidden;
?? ?}
p{
?? ?width:180px;
?? ?padding-left:20px;
?? ?height:24px;
?? ?}
p:hover{
?? ?color:red;
?? ?}
</style>
</head>

<body>
<div id="mooc">
?? ?<div id="moocTitle">MOOC TITLE</div>
??? <div id="moocBox">
?? ??? ?<div id="con1">
?????? ??? ?<p>1.XXXXXXXX</p>
??????????? <p>2.XXXXXXXX</p>
??????????? <p>3.XXXXXXXX</p>
??????????? <p>4.XXXXXXXX</p>
??????????? <p>5.XXXXXXXX</p>
??????????? <p>6.XXXXXXXX</p>
??????????? <p>7.XXXXXXXX</p>
??????????? <p>8.XXXXXXXX</p>
??????????? <p>9.XXXXXXXX</p>
??????????? <p>10.XXXXXXXX</p>
??????? </div>
?????? ?
??? </div>
</div>
<script>
var area=document.getElementById('moocBox');//滾動區(qū)域
var lineHeight=48;//兩倍p的高度
var timer=null;//定時器
area.innerHTML+=area.innerHTML; //克隆
area.scrollTop=0;//初值
function marquee(){//運動
?? ?area.scrollTop++;
?? ?if(area.scrollTop%lineHeight==0){//檢測等待
?? ??? ?clearInterval(timer);
?? ??? ?timer=setTimeout("timer=setInterval('marquee()',50)",2000);//等待后再滾動
?? ??? ?}else{?? ?
?? ??? ??? ?if(area.scrollTop>=area.scrollHeight/2){//無縫滾動
?? ??? ??? ??? ?area.scrollTop=0;
?? ??? ??? ??? ?}
?? ??? ??? ?}
?? ?}
timer=setInterval('marquee()',50);
area.onmousemove=function(){//移入停止
?? ?clearInterval(timer);
?? ?clearTimeout(timer);
?? ?}
area.onmouseout=function(){//移出繼續(xù)
?? ?clearTimeout(timer);
?? ?timer=setInterval('marquee()',50);
?? ?}
</script>
</body>
</html>