課程
/前端開發(fā)
/JavaScript
/信息滾動(dòng)效果制作
無縫滾動(dòng) 像左右無縫滾動(dòng)的怎么做 好像用srcollLeft不行
2016-11-29
源自:信息滾動(dòng)效果制作 2-2
正在回答
<div id="demo" style="overflow:hidden;width:600px;color:#ffffff;"> ? ? ?<table cellpadding="0" cellspacing="0" border="0"> ? ? ? ?<tr><td id="demo1" valign="top" align="center"> ? ? ? ? ?<table cellpadding="2" cellspacing="0" border="0"> ? ? ? ? ? ?<tr align="center"> ?<td><a href="www.baidu.com"><img src="01.gif" width="120" height="100" border="0"></a> ?<td> ? ? ? ? ? ? ?<td><a href="www.baidu.com"><img src="02.gif" width="120" height="100" border="0"></a> ? ? ? ? ? ? ?<td> ?<td><a href="www.baidu.com"><img src="03.gif" width="120" height="100" border="0"></a> ?<td> ?<td><a href="www.baidu.com"><img src="04.gif" width="120" height="100" border="0"></a> ?<td><td><a href="www.baidu.com"><img src="05.gif" width="120" height="100" border="0"></a><td><td><a href="www.baidu.com"><img src="06.gif" width="120" height="100" border="0"></a><td> ? ? ? ? ? ? ?<td><a href="www.baidu.com"><img src="07.gif" width="120" height="100" border="0"></a> ? ? ? ? ? ? ?<td> ? ? ? ? ? ?</tr> ? ? ? ? ?</table> ? ? ? ?</td> ? ? ? ?<td id="demo2" valign="top"></td> ? ? ? ?</tr> ? ? ?</table> ? ?</div> ?<script> ?var speed=1 ?demo2.innerHTML=demo1.innerHTML ?function Marquee(){ ?if(demo2.offsetWidth-demo.scrollLeft<=0) ?demo.scrollLeft-=demo1.offsetWidth ?else{ ?demo.scrollLeft++ ?} ?} ?var MyMar=setInterval(Marquee,speed) ?demo.onmouseover=function() {clearInterval(MyMar)} ?demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)} ?</script>
我想知道#moocBot這個(gè)id是干嘛的,求大神
無縫滾動(dòng)使用的知識(shí)點(diǎn)有innerHTML、scrollTop、offsetHeight、setInterval、clearInterval
使用marquee標(biāo)簽,設(shè)置它的屬性,例如:behavior 、direction、scroll、slide等等
文小麗 提問者
舉報(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)
2017-11-17
<div id="demo" style="overflow:hidden;width:600px;color:#ffffff;">
? ? ?<table cellpadding="0" cellspacing="0" border="0">
? ? ? ?<tr><td id="demo1" valign="top" align="center">
? ? ? ? ?<table cellpadding="2" cellspacing="0" border="0">
? ? ? ? ? ?<tr align="center">
?<td><a href="www.baidu.com"><img src="01.gif" width="120" height="100" border="0"></a>
?<td>
? ? ? ? ? ? ?<td><a href="www.baidu.com"><img src="02.gif" width="120" height="100" border="0"></a>
? ? ? ? ? ? ?<td>
?<td><a href="www.baidu.com"><img src="03.gif" width="120" height="100" border="0"></a>
?<td>
?<td><a href="www.baidu.com"><img src="04.gif" width="120" height="100" border="0"></a>
?<td>
<td><a href="www.baidu.com"><img src="05.gif" width="120" height="100" border="0"></a>
<td><td><a href="www.baidu.com"><img src="06.gif" width="120" height="100" border="0"></a>
<td>
? ? ? ? ? ? ?<td><a href="www.baidu.com"><img src="07.gif" width="120" height="100" border="0"></a>
? ? ? ? ? ? ?<td>
? ? ? ? ? ?</tr>
? ? ? ? ?</table>
? ? ? ?</td>
? ? ? ?<td id="demo2" valign="top"></td>
? ? ? ?</tr>
? ? ?</table>
? ?</div>
?<script>
?var speed=1
?demo2.innerHTML=demo1.innerHTML
?function Marquee(){
?if(demo2.offsetWidth-demo.scrollLeft<=0)
?demo.scrollLeft-=demo1.offsetWidth
?else{
?demo.scrollLeft++
?}
?}
?var MyMar=setInterval(Marquee,speed)
?demo.onmouseover=function() {clearInterval(MyMar)}
?demo.onmouseout=function() {MyMar=setInterval(Marquee,speed)}
?</script>
2017-03-10
我想知道#moocBot這個(gè)id是干嘛的,求大神
2016-11-29
無縫滾動(dòng)使用的知識(shí)點(diǎn)有innerHTML、scrollTop、offsetHeight、setInterval、clearInterval
2016-11-29
使用marquee標(biāo)簽,設(shè)置它的屬性,例如:behavior 、direction、scroll、slide等等