請(qǐng)問？我的代碼必須加上<marquee>標(biāo)簽才會(huì)滾動(dòng)，而且也沒有無縫滾動(dòng)，為什么？xiexie
<<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">?
<title>0916-2無縫滾動(dòng)</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;/*父級(jí)relative子級(jí)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">慕課網(wǎng)最新課程</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.學(xué)會(huì)html5 絕對(duì)的屌絲逆襲（案例）</a><span>2013-09-18</span></li>
<li><a href="#">2.tab頁(yè)面切換效果（案例）</a><span>2013-10-09</span></li>
<li><a href="#">3.圓角水晶按鈕制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基礎(chǔ)課程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分頁(yè)頁(yè)碼制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.導(dǎo)航條菜單制作（案例）</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.如何實(shí)現(xiàn)“新手引導(dǎo)”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="cont2">
</ul>
</marquee>
</div>
</div>
</body>
</html>
2016-09-16
這是你的代碼改過之后能運(yùn)行的樣子，借用了一下你的樣式，謝謝= =。
<<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>0916-2無縫滾動(dòng)</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;/*父級(jí)relative子級(jí)absolute可具體定位*/
right: 10px;
bottom: 10px;
font-size: 14px;
line-height: 24px;
display: inline;
color: #fff;
}
#topBox a:hover{
color: #00f;
}
#bottomBox{
width: 335px;
height: 200px;
/*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>
</head>
<body>
<div id="bigBox">
<div id="topBox">
<span class="logCont">慕課網(wǎng)最新課程</span><a href="#">更多>></a>
</div>
<div id="bottomBox">
<ul id="cont1">
<li><a href="#">1.學(xué)會(huì)html5 絕對(duì)的屌絲逆襲（案例）</a><span>2013-09-18</span></li>
<li><a href="#">2.tab頁(yè)面切換效果（案例）</a><span>2013-10-09</span></li>
<li><a href="#">3.圓角水晶按鈕制作（案例）</a><span>2013-10-21</span></li>
<li><a href="#">4.HTML+CSS基礎(chǔ)課程(系列)</a><span>2013-11-01</span></li>
<li><a href="#">5.分頁(yè)頁(yè)碼制作（案例）</a><span>2013-11-06</span></li>
<li><a href="#">6.導(dǎo)航條菜單制作（案例）</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.如何實(shí)現(xiàn)“新手引導(dǎo)”效果</a><span>2013-12-06</span></li>
</ul>
<ul id="cont2">
</ul>
</div>
</div>
</body>
<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>
</html>
2016-09-16
關(guān)于你的問題。第一，你需要把JS代碼寫到body中<div>的后邊，這樣代碼才會(huì)執(zhí)行，因?yàn)闉g覽器執(zhí)行代碼順序從上到下。第二，你需要給包含兩個(gè)滾動(dòng)內(nèi)容的容器bottomBox設(shè)置高度，因?yàn)槟愕拇a沒有設(shè)置高度所以它是自適應(yīng)高度的。第三，改完之后就可以達(dá)到效果了。