原生js实现无限循环上下滚动公告

简介:        说到滚动,想到的应该就是跑马灯效果。当然在网上有很多种实现方式,今天就用原生js来实现一个简单的上下无限循环滚动公告吧,代码不多,而且容易理解。

       说到滚动,想到的应该就是跑马灯效果。当然在网上有很多种实现方式,今天就用原生js来实现一个简单的上下无限循环滚动公告吧,代码不多,而且容易理解。无需做动画,看起来却有点动画效果。

第一步:(准备)新建一个html文件,内容如下

img_41f33eb0ba463df766823d25361d64b1.png

第二步js脚本:

img_7f367bd5b014537a050e8899e5ff4eb5.png

第三步:运行测试,运行效果:


img_818c57ce87bd4f5cecb68e615d0d851f.gif

源码:

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>测试</title>

<style type="text/css">

          /*样式设置*/

      body{ margin: 0;}

      #scroll-box{width: 200px;height: 22px;background: red;overflow:hidden;}

          #scroll-box ul{margin: 0}

          #scroll-box  li{color: #fff}

</style>

</head>

<body>

<!-- 滚动内容部分 -->

<div id=scroll-box>

<ul>

<li>第一条公告</li>

<li>第二条公告</li>

<li>第三条公告</li>

<li>第四条公告</li>

</ul>

<ul></ul>

</div>

<!-- js部分 -->

<script type="text/javascript">

var box = document.getElementById('scroll-box')

var parent = document.getElementsByTagName('ul')[0]

var parent2 = document.getElementsByTagName('ul')[1]

parent2.innerHTML = parent.innerHTML

      /*启动定时器*/

     var timer = setInterval(autoScrollLine,30)

    /*单行向上滚动效果*/

  function autoScrollLine() {

    /*判断滚动内容是否已经滚完,滚完了则滚动的值重新设置到0

    否则就每隔30毫秒向上滚动1px*/

    if(box.scrollTop>=parent.offsetHeight){

    box.scrollTop=0;

    }else{

      box.scrollTop++;

    }

      /*判断滚动的距离刚好为一条公告的高度时停掉定时器,

      隔1s之后重新启动定时器即可实现公告滚动停留效果 */

      if(box.scrollTop%box.offsetHeight==0){

    clearInterval(timer)

    setTimeout(()=>{

        timer = setInterval(autoScrollLine,30)

    },1000)

    }

}

</script>

</body>

</html>

总结:这里只是用自己想到的办法处理的可能有更好的写法,有些地方可以写得更好,如果有好的建议可以提出来。喜欢我的文章记得关注我哦,说不定以后有更多惊喜!

目录
相关文章
|
JavaScript 前端开发
JS循环for、for...of、for...in
本文介绍了JavaScript中不同的循环语句,包括传统的`for`循环、`for...of`循环用于遍历数组和类数组对象、`for...in`循环用于遍历对象的属性,并通过示例代码展示了它们的用法和区别。
157 6
JS循环for、for...of、for...in
|
11月前
|
JavaScript 前端开发
js循环有几种
js循环有几种
132 0
|
6月前
|
消息中间件 JavaScript 前端开发
最细最有条理解析:事件循环(消息循环)是什么?为什么JS需要异步
度一教育的袁进老师谈到他的理解:单线程是异步产生的原因,事件循环是异步的实现方式。 本质是因为渲染进程因为计算机图形学的限制,只能是单线程。所以需要“异步”这个技术思想来解决页面阻塞的问题,而“事件循环”是实现“异步”这个技术思想的最主要的技术手段。 但事件循环并不是全部的技术手段,比如Promise,虽然受事件循环管理,但是如果没有事件循环,单一Promise依然能实现异步不是吗? 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您
|
8月前
|
JavaScript 前端开发 测试技术
盘点原生JavaScript中直接触发事件的方式
本文全面探讨了原生JavaScript中触发事件的多种方式,包括`dispatchEvent`、`Event`构造函数、`CustomEvent`构造器、直接调用事件处理器以及过时的`createEvent`和`initEvent`方法。通过技术案例分析,如模拟点击事件、派发自定义数据加载事件和实现提示框系统,帮助开发者掌握这些方法在实际开发中的应用,提升灵活性与兼容性。
247 3
|
10月前
|
JavaScript
js动画循环播放特效源码(上班族的一天)
js动画循环播放特效是一段实现了包含形象的卡通小人吃、睡、电脑工作的网页动画,js循环动画,简单的画面设计。非常丝滑有意思,欢迎对此代码感兴趣的朋友前来下载参考。
85 2
|
12月前
|
前端开发 JavaScript
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
本文介绍了JavaScript中的循环语句,包括for循环、for-in循环、for-of循环、while循环、do-while循环以及break和continue的使用。
666 1
前端基础(八)_JavaScript循环(for循环、for-in循环、for-of循环、while、do-while 循环、break 与 continue)
|
12月前
|
JavaScript 前端开发 索引
|
移动开发 前端开发 JavaScript
原生JavaScript+canvas实现五子棋游戏_值得一看
本文介绍了如何使用原生JavaScript和HTML5的Canvas API实现五子棋游戏,包括棋盘的绘制、棋子的生成和落子、以及判断胜负的逻辑,提供了详细的代码和注释。
238 0
原生JavaScript+canvas实现五子棋游戏_值得一看
|
JavaScript 前端开发
JavaScript while 循环
JavaScript while 循环
157 3
|
JavaScript
js 循环数组取值
js 循环数组取值