20150620文本自动滚动效果

html======
<div class="demo1">
    <h3>文本框中的文字自动滚动</h3>
    <div id="roll" data-rwidth="100" data-rheight="100" class="roll">
        <ul id="ul" class="list" style="">
            <li>滟滟随波千万里，何处春江无月明！</li>
            <li>江流宛转绕芳甸，月照花林皆似霰。</li>
            <li>空里流霜不觉飞，汀上白沙看不见。</li>
            <li>江天一色无纤尘，皎皎空中孤月轮。</li>
            <li>江畔何人初见月？江月何年初照人？</li>
            <li>人生代代无穷已，江月年年望相似。</li>
            <li>不知江月待何人，但见长江送流水。</li>
            <li>白云一片去悠悠，青枫浦上不胜愁。</li>
            <li>谁家今夜扁舟子？何处相思明月楼？</li>
        </ul>
    </div>
</div>

css=============

*{margin: 0;padding: 0;}
.roll{height: 165px;overflow: hidden;}
ul li{line-height: 20px;}


js==============

function move(obj,attr,tar,fn) {
    obj.timer && clearInterval(obj.timer);
    obj.timer=setInterval(function () {
        var cur=parseInt(css(obj,attr));
        var speed=(tar-cur)/8;
        speed=(speed>0)?Math.ceil(speed):Math.floor(speed);
        if(cur!=tar){
            obj.style[attr]=cur+speed+"px";
        }else{
            clearInterval(obj.timer);
            obj.timer=null;
            fn && fn();
        }
    },50)

}
function css(obj,attr) {
    if(window.getComputedStyle){
        return window.getComputedStyle(obj,false)[attr]
    }else{
        return obj.currentStyle[attr];
    }
}

var roll=document.getElementById('roll');
var ul=document.getElementById('ul');
function auto() {
    move(ul,'marginTop',-20,function () {
        ul.appendChild(ul.children[0]);
        ul.style.marginTop=0;
        setTimeout(auto, 50);
    })
}
auto();

 

转载于:https://www.cnblogs.com/wz0107/p/4590179.html