跑马灯（走马灯）的js实现

这个跑马灯的实现思路其实跟轮播无缝连接的思路是一样的。实现的效果如下(这个软件的水印真的好明显，小小字在跑的就是跑马灯了=.=)：

跑马灯的样式和html 

样式定义如下

.notice-container {margin-top: 10px;background: #FFFFFF;font-size: 12px;color: #3E4759;height: 30px;overflow: hidden;box-sizing: border-box;width: 100%;display: flex;align-items: center;.notice-icon {display: block;margin-left: 10px;flex-shrink: 0;width: 27px;height: 27px;background: url("../assets/home/icon_home_gg.png") no-repeat;background-size: 100% 100%;}.notice-items {margin: 0 0 0 6px;flex: 1;display: flex;overflow: hidden;.notice-items-inner {display: flex;width: 100%;p {flex-shrink: 0; // 这个结合父级的flex，可以做到不换行margin-right: 100%; // 这里的需求是一行切换完之后才能看到下一行的需求，所以加了100%的marginwhite-space: nowrap;}}}}


js处理如下：

initHorseLamp () {let boxWidth = this.$refs.noticeBox.offsetWidthlet innerWidth = 0let child = this.$refs.noticeInner.childNodeslet count = 0child.forEach(item => {if (item.nodeType === 1) {innerWidth += parseInt(window.getComputedStyle(item).width.split(&＃39;px&＃39;)[0])count++}})innerWidth += boxWidth * (count - 1)if (innerWidth > boxWidth) {let padding = 0let animation = () => {padding -= 1this.$refs.noticeInner.style.cssText = `transform: translate3d(${padding}px, 0, 0)`if (padding === -(innerWidth - parseInt(window.getComputedStyle(child[child.length - 1]).width.split(&＃39;px&＃39;)[0]))) {padding = 0this.$refs.noticeInner.style.cssText = `transform: translate3d(${padding}px, 0, 0)`}this.animatiOnId= requestAnimationFrame(animation)}animation()}
}