                        课程
                    
                        /前端开发
                        
                            /JavaScript
                        
                        /信息滚动效果制作

这个哪出错了呀

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{width:400px;
height:144px;
background: red;
position:relative;
left:40%;
top:200px;
filter:alpha(opacity:80);
opacity:0.8;}
li{
height:24px;
width:350px;
line-height: 24px;
text-align: center;
list-style-type: none;
}
a{
color: black;
font-family: "微软雅黑";
font-size: 14px;
text-decoration: none;
}
</style>
<script>

var con=document.getElementById('id1');
con.innerHTML+=con.innerHTML;
con.scrollTop=0;
var timer;
function scrollUp() {
if(con.scrollTop%24==0){
clearInterval(timer);
setTimeout(startmove(),2000);
}
else{
con.scrollTop++;
if(con.scrollTop>=con.scrollHeight/2){
con.scrollTop=0;
}
}
}
function startmove() {
con.scrollTop++;
timer=setInterval('scrollUp()',50);
}
setTimeout('startmove()',2000);//初始化
</script>
</head>
<body>
<div>
<ul id="id1">
<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>
</div>
</body>
</html>

qq_Justcomplete_04021004

2017-09-10

源自：信息滚动效果制作 3-3

关注问题我要回答

1044

操作

收起

2 回答

qq_Justcomplete_04021004 提问者
2017-09-16

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{width:400px;
height:144px;
background: red;
position:relative;
left:40%;
top:200px;
filter:alpha(opacity:80);
opacity:0.8;
overflow: hidden;}
li{
height:24px;
width:350px;
line-height: 24px;
text-align: center;
list-style-type: none;
}
a{
color: black;
font-family: "微软雅黑";
font-size: 14px;
text-decoration: none;
}
</style>

</head>
<body>
<div id="id1">
<ul id="id2">
<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>
</div>
</body>
<script>

var con=document.getElementById('id1');
var co=document.getElementById('id2');
co.innerHTML+=co.innerHTML;
con.scrollTop=0;
var timer;
var time=50;
function startmove() {
con.scrollTop++;
timer=setInterval('scrollUp()',time);
}
function scrollUp() {

if(con.scrollTop%24==0){
clearInterval(timer);
setTimeout(startmove(),2000);
}
else{
con.scrollTop++;
if(con.scrollTop>=co.scrollHeight/2){
con.scrollTop=0;
}
}
}

setTimeout('startmove()',2000);//初始化
</script>
</html>