字幕不间断横向滚动

最新推荐文章于 2022-09-27 14:40:52 发布

知秋~

最新推荐文章于 2022-09-27 14:40:52 发布

阅读量1k

点赞数

文章标签：不间断滚动

本文链接：https://blog.csdn.net/qq_38881495/article/details/79875097

版权

<!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>