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

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

跑马灯的样式和html

<div class="notice-container"><span class="notice-icon"></span><div class="notice-items" ref="noticeBox"><div class="notice-items-inner" ref="noticeInner"><p>1、这是第一条跑马灯！！！！！！！！！</p><p>2、这是第二条跑马灯！！！</p><p>3、这是第三条跑马灯！！！</p><p>1、这是第一条跑马灯！！！！！！！！！</p> <!-- 这里是复制第一条数据，以做到无缝衔接 --></div></div>
</div>

样式定义如下

.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('px')[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('px')[0]))) {padding = 0this.$refs.noticeInner.style.cssText = `transform: translate3d(${padding}px, 0, 0)`}this.animationId = requestAnimationFrame(animation)}animation()}
}

跑马灯（走马灯）的js实现相关推荐

html纵向的跑马灯效果,HTML+CSS入门如何实现跑马灯/走马灯效果
本篇教程介绍了HTML+CSS入门如何实现跑马灯/走马灯效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实 ...
html语言怎么做到走马灯,HTML+CSS入门如何实现跑马灯/走马灯效果
本篇教程介绍了HTML+CSS入门如何实现跑马灯/走马灯效果,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实 ...
css 实现跑马灯/走马灯无缝衔接 js实现无缝滚动图片
先上效果图首先呈上效果图,主要是针对图片跑马灯效果(请忽略我的快速播放和录屏图标) 具体实现方式目前我需要展示6张图片,但是为了实现无缝衔接,我的列表放了12张(放2遍图片),这样就不至于在切换时 ...
html垂直居中走马灯,史上最全解析：4种方法制作-PPT跑马灯/走马灯图片轮播动画...
本期要点:全面解析不同场景下的跑马灯PPT图片动画技巧概要:动画精准衔接路径起点终点位置插件提高效率图文编辑:幻云PPT设计大雄董军比如我们今天要讲的跑马灯动画跑马灯动画其实是根据咱们传 ...
PHP怎么设置字体走马灯效果,html跑马灯/走马灯效果
实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入"滚动的文字"语句,它的效果如下所示: 滚动的文字适当的运用标签的参数,可以表现 ...
原生js实现跑马灯效果，鼠标放下可以停止跑动
js原生代码跑马灯效果纯js代码如下: 1.首先html的内容(里面图片自己可以换,li里面也可以填文字) <div> <ul><li>呵呵呵呵呵3</li& ...
JS 跑马灯效果实现（很好用）
原文地址为: JS 跑马灯效果实现(很好用) 实现跑马灯效果的JS很多,但是很多不好用,下面介绍一个比较好用的. 好用之处在于: 1 支持一个页面多个跑马灯效果 2.支持跑马灯内容的异步加载关键的实 ...
js在html中加文字走马灯特效,jQuery简单的文字跑马灯特效
插件描述:这是一款非常简单的jQuery文字跑马灯特效插件.该跑马灯特效使文本从右向左不停循环,当鼠标放到跑马灯上的文字时,跑马灯会暂停运动. 更新时间:2018/2/8 下午3:21:52 更新说明 ...
css3 文字走马灯,前端开发：css3实现文字首尾衔接跑马灯
故事背景事情是这样的,卤煮无意间得知一款外放效果宇宙无敌第一的手机!!!脑袋一热就趁着阿东618大促搞了一台,毕竟卤煮是一个地道的电子发烧友!!!但是当卤煮查询物流信息的时候...... 好吧,我这 ...
web展现mysql_web页面实现LED跑马灯效果(涉及web前端、原生JS、PHP、mysql)
本帖最后由 yoin 于 2019-11-21 16:24 编辑产品需求: LED跑马灯页面展示内容(班级电脑展示) setLED更改内容(老师电脑更改内容) LED页面及时更新内容设计思路: 最初 ...

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

跑马灯（走马灯）的js实现相关推荐

最新文章

热门文章