原生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>

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

目录
相关文章
|
17天前
|
JavaScript 前端开发 程序员
探索Vue.js宝库:解锁基础知识与实用技能之门(1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发;1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期)
探索Vue.js宝库:解锁基础知识与实用技能之门(1. 数据绑定与响应式 2. 条件与循环 3. 组件化开发;1. 路由管理与导航 2. 状态管理与Vuex 3. Vue.js的生命周期)
22 1
|
26天前
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
|
4天前
|
JavaScript
【vue】 vue2 | js 实现数字滚动效果
【vue】 vue2 | js 实现数字滚动效果
8 0
|
27天前
|
JavaScript 前端开发
JS循环语句以及一些小练习
JS循环语句以及一些小练习
16 1
|
1月前
|
JavaScript
原生JS实现全选、全不选
原生JS实现全选、全不选
|
11天前
|
JavaScript
js 滚动鼠标滑轮放大缩小图片
js 滚动鼠标滑轮放大缩小图片
9 0
|
12天前
|
JavaScript 前端开发
|
14天前
|
JavaScript
js 一键复制到剪贴板(原生js实现)
js 一键复制到剪贴板(原生js实现)
10 0
|
17天前
|
前端开发 JavaScript 程序员
探索JavaScript宝库:打开基础知识与实用技能之门(数据类型与变量+ 条件与循环+函数与模块+DOM+异常+ES6)
探索JavaScript宝库:打开基础知识与实用技能之门(数据类型与变量+ 条件与循环+函数与模块+DOM+异常+ES6)
13 0
|
17天前
|
前端开发 JavaScript 容器
程序技术好文:纯原生javascript下拉框表单美化实例教程
程序技术好文:纯原生javascript下拉框表单美化实例教程