请问?我的代码必须加上<marquee>标签才会滚动,而且也没有无缝滚动,为什么?xiexie
<<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>0916-2无缝滚动</title>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
body{
text-align: center;
font-size: 12px;
line-height: 24px;
}
ul{
list-style: none;
}
a{
color: #000;
text-decoration: none;
}
a:hover{
color: #00f;
}
#bigBox{
width: 400px;
border:5px solid #ababab;
border-radius: 15px;
margin: 50px auto 0;
text-align:left;
/* -moz-border-radius:15px;
-webkit-border-radius:15px;
box-shadow: 2px 2px 10px #ababab;*/
}
#topBox{
font-size: 26px;
height: 62px;
line-height: 62px;
overflow: hidden;
padding-left: 30px;
color: #fff;
background: #f00;
position: relative;
border:1px solid #f00;
border-radius:8px 8px 0 0;
}
#topBox a{
position: absolute;/*父级relative子级absolute可具体定位*/
right: 10px;
bottom: 10px;
font-size: 14px;
line-height: 24px;
display: inline;
color: #fff;
}
#topBox a:hover{
color: #00f;
}
#bottomBox{
width: 335px;
/*height: 144px;*/
margin-left: 25px;
margin-top: 10px;
overflow: hidden;
}
#bottomBox ul li{
height: 24px;
}
#bottomBox ul li a{
width: 180px;
height: 24px;
text-indent: 15px;
/* float: left;
display: block;
overflow: hidden;*/
}
#bottomBox ul li span{
float: right;
color: #999;
}
</style>
<script type="text/javascript">
var area=document.getElementById("bottomBox");
var cont1=document.getElementById("cont1");
var cont2=document.getElementById("cont2");
cont2.innerHTML=cont1.innerHTML;
var speed=50;
area.scrollTop=0;
function scrollUp(){
if (area.scrollTop>=cont1.offsetHeight){
area.scrollTop=0;
}else{
area.scrollTop++;
}
}
var myScroll=setInterval("scrollUp()",speed);
area.onmouseover=function(){
clearInterval(myScroll);
}
area.onmouseout=function(){
myScroll=setInterval("scrollUp()",speed);
}
</script>
</head>
<body>
<div id="bigBox">
<div id="topBox">
<span class="logCont">慕课网最新课程</span><a href="#">更多>></a>
</div>
<div id="bottomBox">
<marquee behavior="scroll" direction="up" loop=-1 scrollamount="2" scrolldelay="100" onmouseover="stop();" onmouseout="start();">
<ul id="cont1">
<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>
<ul id="cont2">
</ul>
</marquee>
</div>
</div>
</body>
</html>