学了点js写了个效果,但是有点毛病帮忙看一下

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>文字向上滚动</title>

<style type="text/css">

*{margin: 0px;padding: 0px;}

#scrollBox{width: 300px;height: 150px;margin: 100px auto;background: #f00;overflow: hidden;}

ul,li{list-style: none;display:block;}

#scrollBox #con1,#con2{width: 280px;float: left;}

#scrollBox li{height: 15px;line-height: 15px;text-align: center;}

</style>

</head>

<body>

<div id="scrollBox">

<ul id="con1">

<li>中了10块钱<li>

            <li> 中了一个手机<li>

            <li> 中了一块毛巾<li>

            <li> 中了保温杯<li>

            <li> 中了100块钱红包<li>

            <li> 中了20元优惠券<li>

            <li> 中了100块钱<li>

            <!--<li> 中了10块钱</li>

            <li> 中了一个手机</li>

            <li> 中了块毛巾</li>

            <li> 中了个保温杯</li>

            <li> 中了100块钱</li>

            <li> 中了20元优惠券</li>

            <li> 中了100块钱</li>-->

           

</ul>

<ul id="con2"></ul>

</div>

<script type="text/javascript">

var area = document.getElementById('scrollBox');

var con1 = document.getElementById('con1');

var con2 = document.getElementById('con2');

con2.innerHTML = con1.innerHTML;

function scrollUp(){

if(area.scrollTop >= con1.offsetHeight){

area.scrollTop = 0;

}else{

area.scrollTop++

}

}

var time=50;

var mytimer=setInterval(scrollUp,time);

area.onmouseover=function(){

clearInterval(mytimer);

}

area.onmouseout=function(){

mytimer=setInterval(scrollUp,time);

}

</script>

</body>

</html>

在上面代码中如果所有li的内容换成下面的就不能允许了,如果换成上面的就可以正常运行,这是怎么回事,找不到原因。

成长前端初学者
浏览 937回答 1
1回答

QQ_随意

可以运行哦,什么的li标签结尾</li>你上面的<li>没结尾,所以变成了两个<li>
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JavaScript