有时候需要展示的文字较多，但是空间较少，为了能充分的利用空间，可以将文字做成自动滚动的方式。例如网页里的新闻。这里用javascript完成这个功能。

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

实现代码：

html部分:

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

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://fly63.com/article/detial/7767