文本内容自动滚动——javascript

文本内容滚动

我们有可能会在一个有限的文本区域中写入很多的文字，由于文本区域有限通常都会产生滚动条，让我们自己拉动。这很不美观同时也有点烦人，所以我们可以制作一个自动滚动的文本区域，让你的页面更高端更美观

看看成品先：

上代码：
javascript代码片段

window.onload = () => {
            //获取元素
            var roll = document.getElementById("rollCon"),
            div = roll.innerHTML,
            //设置样式
            setCss = (_this, cssOption) => {
                //检测节点类型
                if(!_this || _this.nodeType === 3 || _this.nodeType === 8 || !_this.style)
                    return 
                for(var css in cssOption) {
                    _this.style[css] = cssOption[css]
                }
                return _this
            }
            roll.innerHTML = "<div id='rollCon_roll'>" + div + "</div>"
            //初始化样式
            setCss(rollCon, {             
                "position" : "relative", //设置相对位置
                "overflow" : "hidden"   //当内容超出文本框时隐藏
            })
            var timeRoll = document.getElementById("rollCon_roll"),
            //修改top值
            timeoutRoll = () => {
                var height = timeRoll.offsetHeight,
                    top = parseInt(timeRoll.style.top, 10),
                    tt = height > Math.abs(top) || top >= 0 ? top - 10 : (height || 0)
                //修改样式
                setCss(timeRoll, {
                    "top" : tt + "px"
                })
                //定时调用
                setTimeout(timeoutRoll, 200)
            }
            timeoutRoll()
            //设置先对位置
            setCss(timeRoll, {
                "position" : "relative",
                "top" : "0px"
            })
        }

先获取div元素，再通过javascript对该元素的css样式进行调整，在设置定时调用修改该元素的css样式，使他呈现出自动滚动的效果

html代码片段

<h2>用javascript实现文本自动滚动</h2>
    <div id="rollCon" class="rollCon">
        <ul>
        <li>我我我我我我我我我我我</li>
        <li>是是是是是是是是是是是</li>
        <li>文文文文文文文文文文文</li>
        <li>本本本本本本本本本本本</li>
        <li>，，，，，，，，，，，</li>
        <li>我我我我我我我我我我我</li>
        <li>可可可可可可可可可可可</li>                        
        <li>以以以以以以以以以以以</li>
        <li>滚滚滚滚滚滚滚滚滚滚滚</li>
        <li>动动动动动动动动动动动</li>
        </ul>                   
    </div>