彻底搞懂JS无缝滚动代码

时间:2021-05-18

在做个东西要滚动代码而且是无缝的搞了半天还是不行
决心一定要把这个问题搞定经过研究也不难代码如下:

程序代码

复制代码 代码如下:<divid=demostyle=overflow:auto;height:180;width:200;background:#009900;color:#006600>
<tablealign=top>
<tr>
<tdid=demo1valign=top>

<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>
<p>aaaaaaaaaaa</p>


</td>
</tr>
<tr>
<tdid=demo2valign=top></td>
</tr>
</table>

</div>
<script>
varspeed=15
demo2.innerHTML=demo1.innerHTML//克隆demo1为demo2
functionMarquee(){
if(demo2.offsetHeight-demo.scrollTop<=0)//当滚动至demo1与demo2交界时
demo.scrollTop-=demo1.offsetHeight//demo跳到最顶端
else{
demo.scrollTop++//如果是横向的将所有的heighttop改成widthleft
}
}
varMyMar=setInterval(Marquee,speed)//设置定时器
demo.onmouseover=function(){clearInterval(MyMar)}//鼠标移上时清除定时器达到滚动停止的目的
demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)}//鼠标移开时重设定时器
</script>



复制到一个HTM的文件即可运行了.

声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。

相关文章