Js实现文字水平滚动
现在要实现的效果是,当一行文字超过页面的宽度,需要实现循环轮播的效果。
我们需要实现无缝轮播,所以需要在DOM里面多添加一条,当第一条内容刚好结束的时候也就是第二条开始的时候,此时瞬间切换到第一条的开始位置。这样就可以无缝衔接了。
<div id="scroll-outer" class="scroll__outer"><div id="scroll-inner" class="scroll__inner"><div class="scroll__text">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div><div class="scroll__text" id="last-text">文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字</div></div>
</div>
样式上我们需要注意,第一就是文字不能换行,第二就是两行文字需要排列在一起。
<style>.scroll__outer {position: relative;flex: 1;overflow: hidden;color: #000;width: 100%;height: 36px;}.scroll__inner {position: absolute;left: 0;top: 0;transform: translate3d(0, 0, 0);display: flex;flex-direction: row;}.scroll__text {padding-right: 20px;white-space: nowrap;}
</style>
JS脚本通过获取元素的宽度,然后判断是否超出了页面的宽度,如果超过就开启一个定时器,然后每次间隔一段时间重新设置文字的偏移距离。
<script>const outer = document.getElementById('scroll-outer')const innter = document.getElementById('scroll-inner')const outerWidth = outer.getBoundingClientRect().widthconst innerWidth = innter.getBoundingClientRect().widthconst lastText = document.getElementById('last-text')const padding = 20const middle = innerWidth / 2let translate = 0if (middle - padding > outerWidth) {setInterval(() => {translate = translate >= middle ? 2 : (translate + 2)innter.style.transform = `translate3d(${-translate}px, 0, 0)`}, 100)} else {lastText.style.display = 'none'}
</script>
Js实现文字水平滚动相关推荐
- html页面加文字横向滚动,js实现文字横向滚动
页面布局 恭喜793765***获得 50元巨人点卡奖励 恭喜793765***获得 50元巨人点卡奖励 恭喜793765***获得 50元巨人点卡奖励 恭喜793765***获得 50元巨人点卡奖励 ...
- js实现文字横向滚动与纵向滚动(支持手动滑动距离)
js实现横向滚动 1.布局 <div id="scroll_div" class="fl"> <div id="scroll_beg ...
- 原生JS实现公告栏文字横向滚动(通告栏)
在做APP公告滚动的时候用到,感觉还不错,码了 转载地址:https://blog.csdn.net/zhangzeshan/article/details/83588979#commentsedit ...
- html公告栏设计,原生JS实现公告栏文字横向滚动(通告栏)
在做APP公告滚动的时候用到,感觉还不错,码了 转载地址:https://blog.csdn.net/zhangzeshan/article/details/83588979#commentsedit ...
- 0.96寸OLED(SSD1306)屏幕显示(三)——屏幕垂直水平滚动
0.96寸OLED(SSD1306)屏幕显示 (一)基础功能介绍 (二)超长文字水平滚动 (三)屏幕垂直水平滚动 文章目录 一.垂直水平滚动方法 1)SSD1306驱动芯片 2)SSD1315驱动芯片 ...
- js实现文字滚动效果
在之前小编已经和大家介绍了一些常用的js动画效果,在此,和大家介绍一种可能不太常用的动画效果.该动画效果与文字相关,且,虽然不常用,但几乎每个人都见过它.相信大家都使用酷狗音乐或是网易云音乐进行音乐的 ...
- 原生js实现文字循环向上滚动效果
原生js实现文字循环向上滚动效果 css样式 (最外层的div的高度不要太高,也不要正好包含内容区域的高度,最好比内容区域高度低点,产生滚动条) #scrollArea {width: 400px; ...
- 原生JS实现公告栏文字向上滚动
HTML代码: <div id="top_message"><span style="font-size:19px; position:absolute ...
- js简单文字滚动显示
js简单文字滚动显示 1. html内容 <!DOCTYPE html> <html><head><meta charset="utf-8" ...
最新文章
- 2022-2028年中国汽车俱乐部行业发展趋势与投资战略研究报告
- 如何高效学Python?好用的爬虫工具又有哪些?
- vector function trmplate
- eval函数pythonmopn_python3中的 eval函数
- ES6_对象简洁语法_note
- “管理压力,控制情绪”培训小结
- oracle不连续得时间如何分组,Oracle按不同时间分组统计的sql
- 重磅!阿里推出国产开源的 JDK!
- Java Web 前端到后台常用框架介绍
- 射极跟随器实验报告数据处理_射极跟随器实验报告 -
- 计算机取消补考,2005级《计算机文化基础》补考通知
- Python安装过程中出现“找不到指定的路径”的解决办法
- 安卓手机设置指定文件夹下的图片、视频不被相册读取到
- java安卓分屏是如何实现的_安卓原生分屏有了,谷歌说:Android Q要实现分屏应用多开...
- 美女照相怎么摆pose
- unity疯狂牧场完整项目源码 - Frenzy Farming time management game kit V1.0
- 基于kinect + EmguCV 的监控小应用(视频录制保存)
- 取石子c语言,取石子(一)(C语言)
- 8421码 2421码 5421码和余3码的使用
- 序列的算法(一·a)马尔可夫模型