js文字滚动效果实现

最新推荐文章于 2024-01-24 12:41:26 发布

weixin_30580341

最新推荐文章于 2024-01-24 12:41:26 发布

阅读量86

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/ws-zhangbo/p/9923801.html

版权

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