CSS3+js实现循环滚动文字播放与暂停demo |
您所在的位置：网站首页 › js文字向上循环滚动 › CSS3+js实现循环滚动文字播放与暂停demo |
|
CSS3+js实现循环滚动文字播放与暂停demo
原创
lMovIKE 2021-09-29 16:19:48 ©著作权 文章标签 CSS html 工具方法 css3 sed 文章分类 Html/CSS 前端开发 ©著作权归作者所有：来自51CTO博客作者lMovIKE的原创作品，请联系作者获取转载授权，否则将追究法律责任 一开始这个功能的实现，我使用了marquee，后来发现marquee已被废弃，没办法还是使用css+js来实现 CSS3+js实现循环滚动文字播放与暂停 .box { background-color: #f0f9eb; position: relative; border: 1px solid #ebccd1; height: 40px; line-height: 40px; overflow: hidden; } .toptext, .static { color: #67c23a; white-space: nowrap; position: absolute; animation: txt 10s linear infinite; animation-play-state: running; margin: 0; cursor: pointer; } .static { animation-play-state: paused; } @keyframes txt { 0% { left: 0; } 100% { left: 100%; } }xuepiaorenjian function stopornot(ismove) { let dom = document.getElementById('txt') toggleClass(dom, 'static') toggleClass(dom, 'toptext') } // 工具方法 function hasClass(obj, cls) { return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)')); } function addClass(obj, cls) { if (!this.hasClass(obj, cls)) obj.className += " " + cls; } function removeClass(obj, cls) { if (hasClass(obj, cls)) { var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)'); obj.className = obj.className.replace(reg, ' '); } } function toggleClass(obj, cls, als) { if (hasClass(obj, cls)) { removeClass(obj, cls) } else { addClass(obj, cls) } }
打赏 赞 收藏 评论 分享 举报 上一篇：vscode 注释html代码 下一篇：npm run dev报错this.getOptions is not a funtion |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |