js文字滾動效果實現
阿新 • • 發佈：2018-11-07
<!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>