課程
/前端開發(fā)
/JavaScript
/信息滾動(dòng)效果制作
√abcde
2016-10-21
源自:信息滾動(dòng)效果制作 2-2
正在回答
<div id=demo style="overflow:hidden;width:750;" align=center>
<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr><td valign=top bgcolor=ffffff id=marquePic1>
<table width='100%' border='0' cellspacing='0'>
<tr><td align=center><a href='#'><img src="http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>01</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>02</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>03</a></td>
<td align=center><a href='#'><img src="http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>04</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>05</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>06</a></td>
<td align=center><a href='#'><img src="http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>07</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>08</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>09</a></td>
</tr></table>
</td><td id=marquePic2 valign=top></td></tr>
</table></div>
<script type="text/javascript">
var speed=50?
marquePic2.innerHTML=marquePic1.innerHTML?
function Marquee(){?
if(demo.scrollLeft>=marquePic1.scrollWidth){?
demo.scrollLeft=0?
}else{?
demo.scrollLeft++?
}?
var MyMar=setInterval(Marquee,speed)?
demo.onmouseover=function() {clearInterval(MyMar)}?
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}?
</script>
你將代碼復(fù)制粘貼運(yùn)行一下,看看是不是你想要的效果圖
舉報(bào)
萌妹子帶您快速學(xué)習(xí)滾動(dòng)效果,掌握無縫滾動(dòng)和歇間性滾動(dòng)的制作方法
Copyright ? 2025 imooc.com All Rights Reserved | 京ICP備12003892號(hào)-11 京公網(wǎng)安備11010802030151號(hào)
購課補(bǔ)貼聯(lián)系客服咨詢優(yōu)惠詳情
慕課網(wǎng)APP您的移動(dòng)學(xué)習(xí)伙伴
掃描二維碼關(guān)注慕課網(wǎng)微信公眾號(hào)
2016-10-21
<div id=demo style="overflow:hidden;width:750;" align=center>
<table border=0 align=center cellpadding=1 cellspacing=1 cellspace=0 >
<tr><td valign=top bgcolor=ffffff id=marquePic1>
<table width='100%' border='0' cellspacing='0'>
<tr><td align=center><a href='#'><img src="http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>01</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>02</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>03</a></td>
<td align=center><a href='#'><img src="http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>04</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>05</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>06</a></td>
<td align=center><a href='#'><img src="http://www.baidu.com/img/logo.gif" width=120 height=80 border=0><br><br>07</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>08</a></td>
<td align=center><a href='#'><img src=http://www.baidu.com/img/logo.gif width=120 height=80 border=0><br><br>09</a></td>
</tr></table>
</td><td id=marquePic2 valign=top></td></tr>
</table></div>
<script type="text/javascript">
var speed=50?
marquePic2.innerHTML=marquePic1.innerHTML?
function Marquee(){?
if(demo.scrollLeft>=marquePic1.scrollWidth){?
demo.scrollLeft=0?
}else{?
demo.scrollLeft++?
}?
}?
var MyMar=setInterval(Marquee,speed)?
demo.onmouseover=function() {clearInterval(MyMar)}?
demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}?
</script>
你將代碼復(fù)制粘貼運(yùn)行一下,看看是不是你想要的效果圖