20150621百叶窗效果

html==========

<ul id="ul">
        <li>
            <div>
                <p>111111</p>
                <p>222222</p>
            </div>
        </li>

        <li>
            <div>
                <p>333333</p>
                <p>444444</p>
            </div>
        </li>
        <li>
            <div>
                <p>555555</p>
                <p>666666</p>
            </div>
        </li>
        <li>
            <div>
                <p>777777</p>
                <p>888888</p>
            </div>
        </li>
    </ul>


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

#ul{width: 300px;height: 500px;border-top:1px solid #ccc;position: absolute;}
*{margin: 0;padding: 0;}
li{overflow: hidden;width: 300px;list-style:none;line-height: 30px;height: 30px;position: relative;;left: 0;top: 0;}
li div{position: absolute;top: 0px;left: 0;}


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



function css(obj, attr){
    if(obj.currentStyle){
        return obj.currentStyle[attr];
    } else {
        return getComputedStyle(obj, null)[attr];
    }
}
function move(obj,attr,target,fn){
    obj.timer && clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var cur = parseInt(css(obj, attr));
        var speed = (target - cur) / 8;
        var stop = true;
        speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
        if(target != cur){
            stop = false;
        }
        obj.style[attr] = speed + cur + 'px';
        if(stop){
            clearInterval(obj.timer);
            obj.timer = null;
            fn && fn.call(obj);
        }
    }, 20);
}
var div=document.getElementsByTagName('div');
var timer=null;
var iNow=0;
var btn=true;
setInterval(function () {
    change();
},3000);
function change() {
    var timer=setInterval(function () {
        if(iNow==div.length){
            clearInterval(timer);
            iNow=0;
            btn=!btn;
        }else if(btn){
            move(div[iNow],'top',-30)
            iNow++;
        }else{
            move(div[iNow],'top',0);
            iNow++;
        }
    },100);
}