用javascript让文字自动滚动

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

这里用javascript完成这个功能.

    html部分:

    

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

代码的主要思路:

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