<!doctype html><html><head><meta charset="utf-8"><title>字幕横向滚动</title><script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script> ???<style> ???????ul,li{ ???????????margin: 0; ???????????padding: 0; ???????????list-style: none; ???????????float: left; ???????} ???????#ls{ ???????????position: relative; ???????} ???</style></head><body><div style="width: 500px;height: 30px;border: 1px solid #ccc; overflow: hidden;"> ???<ul id="ls" class="clearfix"> ???????<li class="text">11111111111111111111</li> ???????<li class="text">222222222222222222222222222222222222222</li> ???????<li class="text">333333</li> ???????<li class="text">444444444444444444444</li> ???????<li class="text">55555</li> ???????<li class="text">66666666666666666666666666666666</li> ???????<li class="text">77777777777777777777777777777777777777777777777777777777777777777777</li> ???????<li class="text">8888888888888888888888888888888888888888888888888</li> ???????<li class="text">9999999999999999999999999999999</li> ???????<li class="text">1010101010101010101010101010101010101010101101010101010101011010101010101010101010101011010101</li> ???</ul></div><script> ???var li = document.getElementsByClassName(‘text‘); //获取需要滚动的li ???var time = 30; //滚动速度 ???var w = 0; ???var l = 0; ???for (var i = 0; i < li.length; i++) { ??? w += li[i].offsetWidth; ???} ???$(‘#ls‘).css(‘width‘, 2 * w) ???$(‘#ls‘).append($(‘#ls li‘).clone()); ???setInterval(function() { ??? if (l < -w) { ??? l = 0; ??? } else { ??? $(‘#ls‘).css(‘left‘, l -= 1); ??? } ???}, time);</script></body></html>js文字滚动效果实现
原文地址：https://www.cnblogs.com/ws-zhangbo/p/9923801.html