新闻公告文字横向滚动

主要思路：

居中实现方式：获取span文字所占的宽度后，然后将span文字设置margin-left的值，margin-left使用（所在容器的宽度 - span文字的宽度）/ 2 ；

margin-left的值 + span文字的宽度 <= 0时表明这个公告已经滚出这个所在容器了；

下面图片帮助理解：

下面是组件代码：

<template>
  <div style="text-align: center!important;width: 100%;border-radius: 4px;">
    <div class="second">
    </div>
  </div>
</template>
<script>
  import {
    announcement
  } from "@/api/energy-report/implement-unit-home";
  export default {
    name: "Notice",
    data() {
      return {
        newsInformationData: [],
        newsInformationLoading: true,
        currText: ''
      }
    },
    mounted() {
      this.loadNewsInformationList().then(res => {
        this.rotation()
      });
    },
    methods: {
      // 请求公告信息内容
      loadNewsInformationList() {
        return new Promise((resolve, reject) => {
          this.newsInformationLoading = true;
          announcement()
            .then(res => {
              this.newsInformationData = res.body.news;
              this.currText = this.newsInformationData[0].title
              this.newsInformationLoading = false;
              resolve(res.body.news);
            })
            .catch(err => {
              this.newsInformationLoading = false;
              reject(err);
            });
        });
      },
      rotation() {
        let inter = null;
        //获取偏移内容容器
        let gDivContainer = document.querySelector('.second');
        // 鼠标悬浮在容器事件
        gDivContainer.addEventListener('mouseover', function(e) {
          if (inter) {
            clearInterval(inter);
            inter = null;
          }
        })
        // 鼠标离开容器事件
        gDivContainer.addEventListener('mouseout', function(e) {
          if (!inter) {
            inter = setInterval(scroll, 20);
          }
        })
        // 鼠标离开容器事件
        let _this = this
        //待滚动消息坐标
        let index = 0;
        let text = _this.newsInformationData;
        _this.currText = text && text.length > 0 ? text[index].title : ""
        let divContainer = document.createElement('div')
        let spanContainer = document.createElement('span')
        gDivContainer.appendChild(divContainer);
        divContainer.appendChild(spanContainer)
        spanContainer.innerHTML = _this.currText
        //偏移像素
        let x = (570 - spanContainer.offsetWidth) / 2;
        spanContainer.style.marginLeft = x + 'px'; //通过改变margin-left的值来写出走马灯的效果
        spanContainer.style.fontSize = '16px'
        spanContainer.style.fontWeight = 'bold'
        gDivContainer.addEventListener('click', function(e) {
          _this.$emit("handleNewsClick", text[index].id)
        })
        let scroll = function() {
          x--;
          if (x + spanContainer.offsetWidth <= 0) {
            clearInterval(inter);
            inter = null;
            if (index == text.length - 1) {
              index = 0;
            } else {
              index++;
            }
            _this.currText = text[index].title,
              spanContainer.innerHTML = _this.currText
            x = (570 - spanContainer.offsetWidth) / 2; //根据最外层div标签的宽度来设置
            spanContainer.style.marginLeft = x + 'px'; //通过改变margin-left的值来写出走马灯的效果
            spanContainer.style.fontSize = '16px'
            spanContainer.style.fontWeight = 'bold'
            gDivContainer.addEventListener('click', function(e) {
              _this.$emit("handleNewsClick", text[index].id)
            })
            setTimeout(() => {
              if (!inter) {
                inter = setInterval(scroll, 20);
              }
            }, 3000)
            // })
          } else {
            spanContainer.style.marginLeft = x + 'px'; //通过改变margin-left的值来写出走马灯的效果
            spanContainer.style.fontSize = '16px'
            spanContainer.style.fontWeight = 'bold'
          }
        }
        inter = setInterval(scroll, 20);
      },
    },
  };
</script>
<style>
  .second {
    height: 30px;
    padding: 0 20px;
    line-height: 30px;
    background-color: white;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
    cursor: pointer;
  }
</style>

父组件代码

<Notice style="filter: drop-shadow(2px 2px 10px #999);background-color: white; width: 650px;padding:20px;position: absolute;bottom: 30px;left: 0;right: 0;margin:auto; z-index:20;" @handleNewsClick="handleNewsClick"></Notice>

js

  // 新闻弹框点击事件
  handleNewsClick(id){
    this.newsDialogVisible = true;
    this.$nextTick(() => {
      this.id = id;
      // this.$refs.NewsDetailRefs.getNewsData();
    })
  },

组件导入及新闻弹框子组件在这里就不多贴代码了。