写一个js仿WP主界面.

模仿了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>

点我运行

转载于:https://www.cnblogs.com/lsmayday/archive/2011/12/20/2294673.html