模拟新浪微博的"大家在说" Javascript.

之前在网上想找个现成的,  没找到, 就自己写了个.   供大家参考, 有更好的请提意见哈.

 

html:

 

<div id="doing"> <ul> <li>1</li> <li>2</li> <li>3</li> <li>4</li> </ul> </div>

 

 初始化:

$(function(){
    /*
    * discription: doing section for li roundabout
    */
    roundabout.move(4000);


    //on over div#doing stop flash.
    roundabout.mstop('#doing');

})








对象函数:



/*
* author: teresa  2010-12-31
* description: roundabout object
                      roundabout.move(time) : start move;
                      roundabout.stop():  stop ;
                      roundabout.mstop(obj): when mouseover obj stop roundabout & mouseout restart roundabout.
*/

var roundabout = {
    //index : 0,
    move: function(time){
        //move
        roundabout.o = $('#doing ul li');
        var height = roundabout.o.last().height();
        roundabout.inter = setInterval("roundabout_event();fade_in("+height+");",time);
    },
    stop: function(){
        //stop
        roundabout.inter = clearInterval(roundabout.inter);
    },
    mstop: function(o){
        $(o).mouseover(function(){
            roundabout.stop();
        }).mouseout(function(){
            roundabout.move(4000);
        })
    }
}

function roundabout_event(){
    var o = $('#doing ul li');
    o.last().clone(true).insertBefore(o.first());
}
function fade_in()
{
    var o = $('#doing ul li');
     //return;
    var h = o.last().height();    o.first().css({height:'0',opacity:'0',overflow:'hidden'});
    o.first().animate({height:h},1000);
    o.first().animate({opacity:'1'},500);

    o.last().detach();
}