js文字滚动效果实现

Posted 蛋Mrs炒饭

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了js文字滚动效果实现相关的知识，希望对你有一定的参考价值。

<!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文字滚动效果实现的主要内容，如果未能解决你的问题，请参考以下文章

js文字滚动效果实现

js图片向左滚动效果

js怎么实现一段文字的显示有个明显的过渡效果

在DIV里怎么让文字实现上下滚动的效果

jsjQuery实现文字上下无缝轮播滚动效果

jsjQuery实现文字上下无缝轮播滚动效果