基于JS实现新闻列表无缝向上滚动实例代码

时间：2021-05-25

当新闻较多，并且空前有限的时候，使用滚动是一个不错的选择，本章节就通过代码实例介绍一下如何实现此效果。

代码实例如下:

<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="author" content="https:///" /><title>文字列表无缝向上滚动代码</title><style type="text/css">*{margin:0px;padding:0px;border:0px;}body{font-size:12px}#demo{overflow:hidden;height:80px;width:280px;margin:90px auto;position:relative;}#demo1{height:auto;text-align:left;}#demo2{height:auto;text-align:left;}#demo1 li{list-style-type:none;height:22px;text-align:left;text-indent:15px;}#demo2 li{list-style-type:none;height:22px;text-align:left;text-indent:15px;}</style><script type="text/javascript"> var speed=40 window.onload=function(){var demo=document.getElementById("demo"); var demo2=document.getElementById("demo2"); var demo1=document.getElementById("demo1"); demo2.innerHTML=demo1.innerHTML function Marquee(){ if(demo.scrollTop>=demo1.offsetHeight){demo.scrollTop=0; }else{ demo.scrollTop=demo.scrollTop+1;} } var MyMar=setInterval(Marquee,speed) demo.onmouseover=function(){clearInterval(MyMar)} demo.onmouseout=function(){MyMar=setInterval(Marquee,speed)} }</script></head><body><div id="demo"><ul id="demo1"><li><a href="#" target="_blank">欢迎您的到来</a></li><li><a href="#" target="_blank">只有努力才会有美好的明天</a></li><li><a href="#" target="_blank">没有人一开始就是高手，都是从菜鸟开始</a></li><li><a href="#" target="_blank">每一天都是新的需要好好珍惜</a></li><li><a href="#" target="_blank">怨天尤人是没有任何作用的</a></li><li><a href="#" target="_blank">今天你写代码了吗</a></li><li><a href="#" target="_blank">分享的胸怀和互助的精神最终成就了你</a></li></ul><div id="demo2"></div></div></body></html>

以上代码实现了新闻列表滚动效果，下面介绍一下实现过程:

一.实现原理:

大致原理如下，demo元素中有两个子元素demo1和demo2，并且将demo1中的内容存入demo2中，之所以这样做，是为了当向上滚动的时候，demo2能够接在demo1的后面，否则将不是无缝滚动，而是有缝滚动了，当demo1的内容完全被遮挡之后，也就是demo1完全滚动上去的时候，demo2会恰好位于demo1开始滚动的位置，然后再重新设置demo的scrollTop值，让滚动就重新来过，这样就实现了无缝滚动效果。

基于JS实现新闻列表无缝向上滚动实例代码就给大家介绍到这里，希望大家根据自己的实际需求应用此段代码。

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

相关文章