vue通知公告左右不间断循环滚动，鼠标放置停止滚动，移开重新滚动-Toy模板网

这篇具有很好参考价值的文章主要介绍了vue通知公告左右不间断循环滚动，鼠标放置停止滚动，移开重新滚动。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

思路：1.准备两个span标签，设置一个定时器，让两个span标签一起移动，2.当第二个span标签的尾部移动到盒子的尾部，让第一个span标签头部重新回到盒子尾部位置，跟在第二个span标签后面一起移动，3.当第二个span标签的尾部移动到盒子头部，将他的位置设置为0，跟在第一个span标签后，然后不断循环，达到不间断的效果

注意：需要将两个span标签的总宽度大于盒子宽度

通知公告左右滚动文章来源地址https://www.toymoban.com/news/detail-804131.html

<template>
    <div>
        <div class="dibu2">
            <span id="marquee1">{{ message }}{{ message }}</span>
            <span id="marquee2">{{ message }}{{ message }}</span>
        </div>
    </div>
</template>
  
<script>
export default {
    data() {
        return {
            message: '今天天气好晴朗,处处好风光!今天天气好晴朗,处处好风光!今天天气好晴朗,处处好风光!今天天气好晴朗,处处好风光!',
            marqueeVar: null,
            speed1: 0,
            speed2: 0,
        }
    },
    created() {
        setTimeout(() => {
      this.runMarquee()
    }, 1000)
    },
    methods: {
        //将移动的关键代码移出
        moveMarquee() {
            // 获取内容区宽度
            var width1 = (document.getElementById('marquee1').getBoundingClientRect().width)
            var width2 = (document.getElementById('marquee2').getBoundingClientRect().width)
            //width为第二个span标签尾部到盒子尾部的距离，500为外层盒子的宽度
            var width = width1 + width2 - 500
            var marquee1 = document.getElementById("marquee1");
            var marquee2 = document.getElementById("marquee2");
            this.speed1 = this.speed1 - 1;
            this.speed2 -= 1;
            // 如果speed2的尾部移到盒子的尾部并且speed1的移动距离不超过文字的距离
            if (-this.speed2 >= width && -this.speed1 >= width1) {
                //让speed1重新在原位置移动
                this.speed1 = 500;
            }
            if (-this.speed2 >= width1 + width2) {
                //如果speed2的尾部移动到盒子的头部，让speed2跟在speed1之后移动
                this.speed2 = 0
            }
            marquee1.style.transform = "translateX(" + this.speed1 + "px)";
            marquee2.style.transform = "translateX(" + this.speed2 + "px)";
        },
        runMarquee() {
            var marquee1 = document.getElementById("marquee1");
            var marquee2 = document.getElementById("marquee2");
            this.marqueeVar = setInterval(() => this.moveMarquee(), 30);
            //监听鼠标移入，清空定时器
            marquee1.addEventListener('mouseenter', () => {
                clearInterval(this.marqueeVar);
                this.marqueeVar = null
            })
            marquee2.addEventListener('mouseenter', () => {
                clearInterval(this.marqueeVar);
                this.marqueeVar = null
            })
            //监听鼠标移开，重启定时器
            marquee1.addEventListener('mouseleave', () => {
                this.marqueeVar = setInterval(() => this.moveMarquee(), 30);
            }
            )
            marquee2.addEventListener('mouseleave', () => {
                this.marqueeVar = setInterval(() => this.moveMarquee(), 30);
            }
            )
        }
    },
}
</script>
  
<style>
.dibu2 {
    width: 500px;
    font-size: 0.25rem;
    overflow: hidden;
    white-space: nowrap;
    background: red;
}

#marquee1 {
    display: inline-block;
}

#marquee2 {
    display: inline-block;
}
</style>

到了这里，关于vue通知公告左右不间断循环滚动，鼠标放置停止滚动，移开重新滚动的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！