vue实现 marquee(走马灯)

样式

代码

<div class="marquee-prompt">
    <div class="list-prompt" ref='boxPrompt'>
        <span v-for="item in listPrompt" :title="item" class="prompt">{{item}}</span>
    </div>
</div>
 
data() {
    return {
        listPrompt: ['xxx', 'xxxx']
    }
}
 
mounted() {
    this.moveBoxPrompt()
},
 
methods: {
    moveBoxPrompt() {
        let target = this.$refs.boxPrompt
        let initLeft = 0
        setInterval(() => {
            initLeft ++
            if(initLeft >= target.offsetWidth){
              initLeft = 0
            }
            target.style = 'transform: translateX(-'+ initLeft +'px)'
        },16)
    },
}复制

css

.marquee-prompt {
  margin-bottom: 10px;
  width: 100%;
  overflow: hidden;
  position: relative;
  height: 20px;
  line-height: 20px;
}
.list-prompt {
  position: absolute;
  white-space: nowrap;
}
.prompt {
  font-style: italic;
  text-decoration: underline;
  font-size: 14px;
  color: #1890ff;
  font-weight: bold;
  width: 100px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
  user-select: none;
  margin-right: 10px;
 
  &:hover {
    color: #68aef8;
  }
  &:active{
    color: #1890ff;
  }
}复制