SNS网站消息随机展示效果

随机看似是很随意的概念，但是要实现接近自然的随机却并不容易。如本例的要求：

还是上图方便啊~一图顶千言

 

45条信息，散乱排列，信息默认只显示小头像，随机轮换每次显示三个且尽量避免遮挡。

 要做出星星点点此起彼伏的感觉.

思路是设置一个长度为总体数目三分之一的种子数组：

 seeds = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14]

 乱序排列

 order = it.randomOrder()

后遍历 取 一个基数n,以及 n+15, n+30

作为当前时间段内要展示的三个一组。

该组遍历完毕后，再次乱序遍历

实现的效果点击图片查看，代码如下：

var blinkMsgs = (function() {
    var it = {},wall,items,t = [],h = [],seeds = [0,1,2,3,4,5,6,7,8,9,10,11,12,13,14],stay = 8E3,nowShow = [],nt3=[],order = [],grp = -1;
    it.ie6 = $.browser.msie && $.browser.version=="6.0";
    it.IOS = /\((iPhone|iPad|iPod)/.test(navigator.userAgent);
    it.init = function() {
        wall = $('#msgwall');
        items = wall.find('li');
        order = it.randomOrder();
        //it.setPostion();
        it.bindAct();
        it.randomShow();
    };
    it.randomOrder = function() {
        var alen = seeds.length,
        temp1 = [];
        for (var i = 0; i < alen; i ++) {
            temp1 [i] = i
        }
        var temp2 = [];
        for (var i = 0; i < alen; i ++) {
            temp2 [i] = temp1.splice (Math.floor (Math.random () * temp1.length) , 1)
        }
        var temp3 = [];
        for (var i = 0; i < alen; i ++) {
            temp3 [i] = seeds [temp2 [i]]
        }
        return temp3
    };
    it.randomShow = function() {
        var once = nt3.length;
        grp ++;
        if(grp == seeds.length) {
            order = it.randomOrder();
            grp = 0;
        };
        var base = order[grp],tmpnt3 = [base, base+15, base+30];

        if(!once) {
            for(var i=0; i<tmpnt3.length; i++) {
                var li = items.eq(tmpnt3[i]).addClass('autoShow');
                it.showMsg(li);
                nowShow[i] = li;
            }
        };
        nt3 = tmpnt3;

        for(var i=0; i<nt3.length; i++) {
            (function() {
                var ii = i,tohide = nowShow[ii];
                if(once) {
                    setTimeout( function() {
                        it.hideMsg(tohide);
                    },ii*stay/6);
                }
                var li = items.eq(nt3[i]).addClass('autoShow');
                setTimeout( function() {
                    it.showMsg(li);
                },(ii)*stay/6);
            })();
        };
        nowShow=[items.eq(nt3[0]),items.eq(nt3[1]),items.eq(nt3[2])];
        setTimeout(arguments.callee,stay);
    };
    it.bindAct = function() {
        var timer = false;
        items.bind({
            'mouseleave': function() {
                var li = $(this),idx = li.index();
                if(!li.hasClass('showing') || li.hasClass('autoShow'))
                    return;
                if(!t[idx]) {
                    t[idx] = setTimeout( function() {
                        it.hideMsg(li)
                    },500);
                };
                li.removeClass('ztop');
                return false;
            },
        click:function(){
             var li = $(this);
             if(it.IOS && li.hasClass('clickshow')){
                 it.hideMsg(li);
                 }
            }    
        });
        
        items.find('a.shd').bind({
            'click': function() {
                var li = $(this).parent('li'),idx = li.index(),msg = li.find('blockquote');
                if(li.hasClass('showing'))
                    return;
                li.addClass('clickshow');    
                it.showMsg(li);                
                return false;
            },
            'mouseover': function() {
                var li = $(this).parent('li'),idx = li.index();
                if(it.ie6) {
                    li.addClass('ztop');
                    }else{
                    var img = $(this).find('img');
                    img.fadeTo('fast',0.95);    
                    }
                if(t[idx])
                    clearTimeout(t[idx]);
                t[idx] = false;
                return false;
            },
            'mouseleave':function(){
                 var li = $(this).parent('li');
                 if(it.ie6) {
                     li.removeClass('ztop');
                    }else{
                    var img = $(this).find('img');
                    img.fadeTo('slow',0.5);    
                    }
                }
            });
        

    };
    it.setPostion = function() {
        wall = $('#msgwall');
        items = wall.find('li');
        var wl = wall.offset().left, ww = wall.width();
        $.each(items, function(i) {
            var li = $(this),img=li.find('a.shd img'),idx = li.index()+1,dir,msg = li.find('blockquote'),point = '<span class="aro"></span>',c = ' c'+ Math.round(Math.random()*4);
            //img.attr('dynsrc',img.attr('src').replace('_s',''));
            var bimg = new Image();
            bimg.src = img.attr('src').replace('_s','');
            msg.append($(point));
            if(it.ie6){
                img.attr('src',bimg.src);
                li.addClass(' p'+ idx + c);    
                if(li.offset().left + li.width() + 174 > wl + ww) {
                        dir = ' d_r';
                    } else {
                        dir = ' d_l';
                    }
                   li.addClass(dir);
                }else{
                it.animateToClass(li,' p'+idx,1200);
                li.addClass(c);  
                }

        });
    };
    
    it.animateToClass = function(ele,cls,dur){
        var clone = ele.clone().addClass(cls+' unvisiable').appendTo(wall);
        var wl = wall.offset().left, ww = wall.width(),li = ele;
        var clft = clone.css('left'),
            ctop = clone.css('top');
            
        ele.animate({
            left:clft,
            top:ctop
            },{queue:false,
            duration:dur,
            easing:"easeOutQuart",
            complete: function() {
                ele.removeAttr('style').addClass(cls);
                if(li.offset().left + li.width() + 174 > wl + ww) {
                    dir = ' d_r';
                } else {
                    dir = ' d_l';
                }
                li.addClass(dir);
                clone.remove();    
            }
            });    
        
        };
    
    it.showMsg = function(itm) {
        if(it.ie6){
            itm.addClass('showing ie6on');
            return;
            }
        var tab = itm.find('table'),idx = itm.index(),msg = itm.find('blockquote');
        var showTip = function() {
            msg.fadeIn(400)//.hide('slow');
        };
        if(tab.length) {
            tab.show();
            it.zoomInBighd(tab,showTip);
        } else {
            var shd = itm.find('a.shd'),
            url = shd.attr('rel'),
            img = shd.find('img').attr('src').replace('_s',''),
            tmp = '<table><tr><td><a class="bhd" href="USERURL"><img src="IMGURL"></td></a></tr></table>';
            tmp = tmp.replace('USERURL',url).replace('IMGURL',img);
            tab = $(tmp).appendTo(itm);
            it.zoomInBighd(tab,showTip);
        }

        //msg.fadeIn(600);//.show('slow');
        itm.addClass('showing');

    };
    it.hideMsg = function (itm) {
        if(it.ie6){
            itm.removeClass('showing autoShow ztop clickshow ie6on');
            return;
            }
        var tab = itm.find('table'),msg = itm.find('blockquote'),idx = itm.index();
        msg.fadeOut(600).css('z-index',24);
        it.zoomOutBighd(tab);
        itm.removeClass('showing autoShow ztop clickshow');
        clearTimeout(t[idx]);
    }
    it.zoomInBighd = function(tab,callback) {
        if(it.ie6) return;
        tab.find('img').animate({
            'width':90,
            'height':90
        },
        {queue:false,
            duration:400,
            easing:"easeOutQuart",
            complete: function() {
                if(callback)
                    callback();
            }
        })
    };
    it.zoomOutBighd = function(tab,callback) {
        if(it.ie6) return;
        tab.find('img').animate({
            'width':48,
            'height':48
        },600, function() {
            tab.hide();
        })
    }
    return it;