模仿了WP的tile的title和message的切换功能，和一个数字的提示，以及一个拖动的实现

 

脚本代码

function WPFn(o){
    this.o=o;
    this.time=2500;
    this.toggletime=1000;
    this.scrollmove=false;
    this.Initialization();
    this.Run();
    document.onselectstart=new Function ("return false");
}
WPFn.prototype.Run = function(){
    var self = this;
    $("#"+this.o+" ul li[class='Tile']").each(function(i){
        var Tile=this;
        setTimeout(function(){
            self.toggle(Tile);
        },parseInt(Math.random()*10)*self.time);
    });
}
WPFn.prototype.Initialization=function(){
    var self=this;
    var _o=this.o;
    var Y=0;
    
    $(window).resize(function(){
        $("#"+_o).css("height",$(window).height());
    });
    $(window).resize();
    $("#"+this.o).bind("mousedown",function(){
        self.scrollmove=true;
        Y=event.clientY;
    });
    $("#"+this.o).bind("mousemove",function(){
        if(self.scrollmove){
            var current_Y=0;
            current_Y=event.clientY-Y;
            $("#"+_o).scrollTop((event.clientY>Y)?(current_Y):($("#"+_o).scrollTop()+current_Y));
        }
    });
    $("#"+this.o).bind("mouseup",function(){
        self.scrollmove=false;
    });
    
}
WPFn.prototype.toggle=function(Tile){
    var self = this;
    var Title=$(Tile).children(".Title");
    var Message=$(Tile).children(".Message");
    if(parseInt($(Title).css("bottom"))!="0"){
        $(Message).animate({bottom: "-20"}, this.toggletime);
        $(Title).css({
            "-webkit-transform":"rotate(-0deg)",
            "-moz-transform":"rotate(-0deg)",
            "filter":"progid:DXImageTransform.Microsoft.BasicImage(rotation=0)"
        });
        $(Title).animate({bottom: 0}, this.toggletime);
    }else{
        $(Message).animate({bottom: 0}, this.toggletime);
        $(Title).css({
            "-webkit-transform":"rotate(-180deg)",
            "-moz-transform":"rotate(-180deg)",
            "filter":"progid:DXImageTransform.Microsoft.BasicImage(rotation=2)"
        });
        $(Title).animate({bottom: 25}, this.toggletime);
    }
    setTimeout(function(){
        self.toggle(Tile);
    },parseInt(Math.random()*10)*self.time);
}

 

布局代码

    <div id="MainWP">
        <ul>
            <li class="Tile">
                <div class="Title">内容管理</div>
                <div class="Message">我是提示信息..</div>
                <div class="Number appbar-basecircle-rest">3</div>
            </li>
            <li class="Tile">
                <div class="Title">会员管理</div>
                <div class="Message">我是提示信息..</div>
                <div class="Number appbar-basecircle-rest">1</div>
            </li>
            <li class="End"></li>
            <li class="Tile">
                <div class="Title">模版管理</div>
                <div class="Message">我是提示信息..</div>
            </li>
            <li class="Tile">
                <div class="Title">标签管理</div>
                <div class="Message">我是提示信息..</div>
            </li>
            <li class="End"></li>
            <li class="Tile">
                <div class="Title">内容管理</div>
                <div class="Message">我是提示信息..</div>
                <div class="Number appbar-basecircle-rest">1</div>
            </li>
            <li class="Tile">
                <div class="Title">会员管理</div>
                <div class="Message">我是提示信息..</div>
                <div class="Number appbar-basecircle-rest">3</div>
            </li>
            <li class="End"></li>
            <li class="Tile">
                <div class="Title">模版管理</div>
                <div class="Message">我是提示信息..</div>
            </li>
            <li class="Tile">
                <div class="Title">标签管理</div>
                <div class="Message">我是提示信息..</div>
            </li>
            <li class="End"></li>
            <li class="Tile">
                <div class="Title">内容管理</div>
                <div class="Message">我是提示信息..</div>
                <div class="Number appbar-basecircle-rest">5</div>
            </li>
            <li class="Tile">
                <div class="Title">会员管理</div>
                <div class="Message">我是提示信息..</div>
                <div class="Number appbar-basecircle-rest">1</div>
            </li>
            <li class="End"></li>
            <li class="Tile">
                <div class="Title">模版管理</div>
                <div class="Message">我是提示信息..</div>
            </li>
            <li class="Tile">
                <div class="Title">标签管理</div>
                <div class="Message">我是提示信息..</div>
            </li>
            <li class="End"></li>
        </ul>
    </div>
<script>
    var Wp=new WPFn("MainWP");
</script>

点我运行