【前端常用功能效果】无缝滚动的公告栏

一：Notice.vue无缝滚动公告栏组件

<template>
  <div class="ScrollObjWrap" ref="ScrollObjMainParent">
    <div class="ScrollObjMain" ref="ScrollObjMain">
      <div class="ScrollObjMains" ref="ScrollObjMains">
        <a href="javascript:void(0)" v-for="item in ScrollObj">{{item}}</a>
        <a v-if="boors" href="javascript:void(0)" v-for="item in ScrollObj">{{item}}</a>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: ["ScrollObj"],
  data(){
    return {
      TimeAll:[],
      boors:false
    }
  },
  created() {
    this.$nextTick(()=>{
      this.animateScrollFun();
    })
  },
  methods:{
    animateScrollFun(){
      if(this.TimeAll && this.TimeAll.length>0){
        this.TimeAll.forEach(item=>{
          clearInterval(item)
        })
      }
      let ScrollObjMainParent = this.$refs.ScrollObjMainParent,
          ScrollObjMains = this.$refs.ScrollObjMains,
          ScrollObjMain = this.$refs.ScrollObjMain;
      let Num = 0;
      let MaxW = ScrollObjMainParent.clientWidth,
          Width = ScrollObjMains.clientWidth+2;
      let Time = null;
      let Animate = ()=>{
        if(Width>MaxW){
          ScrollObjMain.style.width = Width*2+"px";
          this.boors = true;
          Time = setInterval(()=>{
            Num++;
            if(Width-2 <= Num){
              Num = 0;
            }
            ScrollObjMain.style.marginLeft = -Num+"px";
          },60)
          this.TimeAll.push(Time)
        }
      }
      let Time1 = setTimeout(()=>{
        Animate();
        clearTimeout(Time1)
      },2000)
      ScrollObjMainParent.addEventListener("mouseenter",()=>{
        clearInterval(Time);
        clearTimeout(Time1)
      })
      ScrollObjMainParent.addEventListener("mouseleave",()=>{
        Animate();
      })
    }
  },
  beforeDestroy(){
    if(this.TimeAll && this.TimeAll.length>0){
      this.TimeAll.forEach(item=>{
        clearInterval(item)
      })
    }
  }
};
</script>
<style scoped>
.ScrollObjWrap {
  overflow:hidden;
}
.ScrollObjMain {
  width:1000%;
  overflow:hidden;
}
.ScrollObjMains {
  float:left;
  overflow:hidden;
}
.ScrollObjMain a {
  float:left;
}
.zytzWrap dl dd a {
  color: #203f78;
  font-size: 12px;
  margin-right:20px;
}
.zytzWrap dl dd a:hover {
  text-decoration:underline;
}
@media screen and (min-width: 1440px){
  .zytzWrap dl dd a {
    font-size: 14px;
  }
}
</style>

二：调用组件

<NoticeScroll :ScrollObj="ScrollObj"  />
<script>
import NoticeScroll from "../components/Notice";
export default {
  components: {
    NoticeScroll
  },
  data() {
    return {
      ScrollObj:["1此处添加通知公告内容，并且内容超出显示区域进行左右滚动！","2此处添加通知公告内容此处添加通知公告内容"]
    }
  }
}
</script>