如何用javascript制作滚动文字？

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

实现代码：

html部分:

<div id="roll" class="roll">
    11111111111111111111111
    222222222222222222222222
    33333333333333333333333
    44444444444444444444444
    55555555555555555555555
</div>

JavaScript部分：

代码的主要思路:

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",
    })
}

以上就是如何用javascript制作滚动文字？的详细内容，更多请关注易知道|edz.cc其它相关文章！