<!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>
原文地址：https://www.cnblogs.com/ws-zhangbo/p/9923801.html
时间： 2024-10-17 20:51:55