javascript制作滚动文字

用javascript制作滚动文字的方法如下:

<div id="roll" class="roll">
    11111111111111111111111
    22222222222222222222222
    33333333333333333333333
    44444444444444444444444
    55555555555555555555555
</div>
<script>
    /*
    *思路
    *1、首先写一个函数动态的设置节点的style
    *2、每过一段特定的时间,文字的top值减少指定的值
    *3、如果是最后一项,则恢复为最开始的状态.
    * */
    var roll = document.getElementById("roll");
    var div = roll.innerHTML;
    setcss = function (_this, css) {
        if (!_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style) {
            return;
        }
        for (var i in css) {
            _this.style[i] = css[i];
        }
        return _this;
    };
    roll.innerHTML = "<div id='rr'>" + div + "</div>";
    setcss(roll, {
        "position": "relative",
        "overflow": "hidden",
        "width": "100px",
        "height": "100px",
        "color": "red",
    })
    var timeroll = document.getElementById("rr");
    var h = timeroll.offsetHeight;
    Timeroll = function () {
        var h = timeroll.offsetHeight;
        var t = parseInt(timeroll.style.top, 10);
        var tt = h > Math.abs(t) || t >= 0 ? t - 10 : (h || 0);
        setcss(timeroll, {
            "top": tt + "px"
        });
        setTimeout(Timeroll, 200);
    };
    if (h > 100) {
        Timeroll();
        setcss(timeroll, {
            "position": "relative",
            "top": "0px",
        })
    }
</script>
posted @ 2019-12-19 16:33  2807010508  阅读(743)  评论(0编辑  收藏  举报