JS实现新闻播报滚动效果

秒速五厘米 2021-08-28 21:18 696阅读 0赞

# 效果图 #

**1. 横向滚动播报**  
![在这里插入图片描述][20200424144930849.gif]  
    **2. 纵向滚动播报**  
![在这里插入图片描述][20200424145944230.gif]

# 横向滚动 #

# 纵向滚动 #

<template>
      <div class="wrapper">
        <div class="top">
          <div class="top-cont" ref="top_cont">
            <div class="begin" ref="top_begin" v-html="txt"></div>
            <div class="end" ref="top_end" v-html="txt"></div>
          </div>
        </div>
      </div>
    </template>
    
    <script> export default { data () { return { arrTxt: [ { txt: '小兔子要上床睡觉了，它紧紧抓着大兔子的长耳朵，要大兔子好好听它说。“猜猜我有多爱你？”小兔子问。“奥！我大概猜不出来。”大兔子笑笑地说。“我爱你这么多。”小兔子把手臂张开，开得不能再开。大兔子有更长的手臂，它张开来一比，说：“可是，我爱你这么多。”' }, { txt: '小兔子动动右耳，想：“嗯，这真的很多。”“我爱你，像我举得这么高，高得不能再高。”小兔子说，双臂用力往上撑举。“我爱你，像我举的这么高，高的不能再高。”大兔子也说。小兔子想，真糟，他又比我高。小兔子又有个好主意，它把脚顶在树干上倒立了起来。' }, { txt: '它说，“我爱你到我的脚趾头这么多。”大兔子一把抓起小兔子的手，将它抛起来，飞得比它的头还高，说：“我爱你到你的脚趾头这么多。”小兔子大叫：“我爱你，一直到过了小路，在远远的河那边。”大兔子说：“我爱你，一直到过了小河，越过山的那一边。”' }, { txt: '小兔子想，那真的好远。它揉揉红红的两眼，开始困了，想不出来了。它抬头看着树丛后面那一大片的黑夜，觉得再也没有任何东西比天空更远了。大兔子轻轻抱起频频打着哈欠的小兔子，小兔子闭上了眼睛，在进入梦乡前，喃喃说：“我爱你，从这里一直到月亮。”' }, { txt: '“奧！那么远。”大兔子说。真的非常远、非常远。大兔子轻轻将小兔子放到叶子铺成的床上，低下头来，亲亲它，祝它晚安。然后，大兔子躺在小兔子的旁边，小声地微笑着说：“我爱你，从这里一直到月亮，再绕回来。”' }, { txt: '我爱你，要比你爱我更多更长。' } ] } }, mounted () { this.scrollTop() }, methods: { scrollTop () { let btmCont = this.$refs.btm_cont let btmBegin = this.$refs.btm_begin this.labelScroll(btmCont, btmBegin, 1, 30, 2500) }, labelScroll (scrollBox, contentBox, speed, timesp, delayTime, num) { let minspeed = 1 if (window.innerWidth > 1900) { minspeed = 1.5 } let speeds = speed || minspeed let timesps = timesp || 100 let nums = num || 0 let delayTimes = delayTime || 0 // 定时器标识 let timer let timeoutStart let timeoutEnd // 鼠标是否在容器内标识 let isMouseIn = false // 滚动到容器顶部标识 let isTop = true // 鼠标是否在容器内标识 let isBottom = false if (scrollBox) { // 异步解决渲染延迟 setTimeout(function () { // 滚动时触发判断是否滚动到底部 let isBottomFn = function () { // 判断后取整再判断，避免到底时scrollTop为小数无法进入判断,切换页面时节点消失， // div的以上打印的3个变量都为0，无法滚动，不会再触发滚动事件的代码，实现自动清除定时器功能 if (scrollBox.scrollTop + scrollBox.offsetHeight >= scrollBox.scrollHeight - nums || Math.ceil(scrollBox.scrollTop) + scrollBox.offsetHeight >= scrollBox.scrollHeight - nums) { // 到底后先清除滚动定时器，否则定时器一直执行，一直到底，把timeoutEnd延时器设置了又清了， // 一直循环，无法延时2秒执行 clearInterval(timer) clearTimeout(timeoutEnd) timeoutEnd = setTimeout(function () { scrollBox.scrollTop = 0 }, 2000) } } // 判断并设置顶部\底部标识 let initPlag = function () { if (scrollBox.scrollTop === 0) { isTop = true } else { isTop = false } if (scrollBox.scrollTop + scrollBox.offsetHeight >= scrollBox.scrollHeight) { isBottom = true } else if (Math.ceil(scrollBox.scrollTop) + scrollBox.offsetHeight >= scrollBox.scrollHeight) { isBottom = true } else { isBottom = false } } // 在渲染后才去获取高度和判断 // 页面内容足够多时才滚动 if (scrollBox.offsetHeight < scrollBox.scrollHeight) { let scrollfun = function () { // 获取原来的滚动高度 let sTop = scrollBox.scrollTop sTop = sTop + speeds // 更新滚动高度 scrollBox.scrollTop = sTop isBottomFn() } clearTimeout(timeoutStart) timeoutStart = setTimeout(function () { clearInterval(timer) timer = setInterval(scrollfun, timesps) }, delayTimes) // 清空上一次绑定的事件 scrollBox.onmouseenter = null scrollBox.onmouseleave = null scrollBox.onmouseenter = function () { isMouseIn = true clearTimeout(timeoutStart) clearTimeout(timeoutEnd) clearInterval(timer) } scrollBox.onmouseleave = function () { isMouseIn = false initPlag() // 如果鼠标离开时刚好滚动到顶部，则延时2秒再开定时器 if (isTop) { clearTimeout(timeoutStart) timeoutStart = setTimeout(function () { clearInterval(timer) timer = setInterval(scrollfun, timesps) }, delayTimes) } else { clearInterval(timer) timer = setInterval(scrollfun, timesps) } } // 鼠标滚动到底部时自动切换滚动高度，实现无缝连接效果 scrollBox.onscroll = function () { initPlag() if (scrollBox.scrollTop === 0 && !isMouseIn) { // 跳到顶部后延迟2秒再滚动 clearTimeout(timeoutStart) timeoutStart = setTimeout(function () { clearInterval(timer) timer = setInterval(scrollfun, timesps) }, delayTimes) } } } }, 1) } } } } </script>
    
    <style scoped> .wrapper { width: 100%; height: 100%; } .wrapper .btm { width: 100%; height: 70%; } .wrapper .btm .btm-cont { width: 40%; height: 400px; margin: 50px auto 0; padding: 0 10px; box-sizing: border-box; line-height: 40px; font-size: 20px; background: #0f0f0f; overflow: auto; position: relative; color: #fff; cursor: pointer; } .wrapper .btm .btm-cont .begin p { text-indent: 2em; } /*去掉滚动条*/ ::-webkit-scrollbar { width: 0px; height: 0px; background-color: #F5F5F5; } </style>

[20200424144930849.gif]: /images/20210813/0ca0bac75ee14802be7ba2b0f356b51e.png
[20200424145944230.gif]: /images/20210813/de17c90d6c1a4144b70a1a33df3b62bb.png