辽阳市网站建设今天新闻联播
- CSS animation margin-left
第一种方法是使用css 动画方法，使用margin-left属性来控制文字元素距离父元素左侧的距离。现附上源码：
<div class="container"><div class="text"><span>循环滚动播放滴滴答答滴滴答答滴滴答答</span></div>
<div>
CSS部分
.text {margin-left: 0;animation: myscroll 5s linear infinite;} @keyframes myscroll {0% {margin-left: 0;}25% {margin-left: -75%;}50% {margin-left: -150%;}75% {margin-left: -200%;}100% {margin-left: -250%;}
} 此方法的主要问题在于，margin-left是100%是相对于父级元素的宽度来说的，因此这个值的设定要取决于父级元素的宽度和本身元素内容的宽度
2.CSS animation transform: translateX();
@keyframes myscroll {0% {transform: translateX(0);}100% {transform: translateX(-100%);}}translateX中的-100%是相对于元素自身宽度而言的，因此能够实现向左平移滚动的效果。
3. 使用js scrollLeft
window.onload = function() {let text = document.getElementsByClassName('text')[0];let container = document.getElementsByClassName('container')[0];let copy = document.getElementsByClassName('copy')[0];copy.innerHTML = text.innerHTML;let count = 0;// text.scrollLeft = 0;function loop() {if (copy.offsetWidth <= container.scrollLeft) {// container.appendChild(text);// container.scrollLeft -= 200;}if (copy.offsetWidth + 100 <= container.scrollLeft) {if (count / 2) {container.appendChild(text);}else {container.appendChild(copy);}container.scrollLeft -= (copy.offsetWidth + 100);count ++;}else {container.scrollLeft += 1;}}setInterval(loop, 20);};列出几个关键点：
a. scorllLeft 可以读取或设置元素滚动条到元素左边的距离。注意如果这个元素的内容排列方向（direction） 是rtl (right-to-left) ，那么滚动条会位于最右侧（内容开始处），并且scrollLeft值为0。此时，当你从右到左拖动滚动条时，scrollLeft会从0变为负数。
b. 为实现无缝滚动，需要复制一份一样的元素至原元素的后方。
c. 当scrollLeft值为元素的宽度+父级元素的宽度时，即刚好滚动至第二个元素处于初始位置时，将第一个元素至于第二个元素的后方，继续滚动播放。
效果：
参考链接： https://developer.mozilla.org/zh-CN/docs/Web/API/Element/scrollLeft
https://www.cnblogs.com/shizhouyu/p/4462594.html