今天帮朋友写了一些代码,自己觉得写着写着，好几个版本以后，有点满意，于是就贴出来。

都是定死了的。因为需求就只有4个元素。如果是要用CSS的class来处理，那就需要用到CSS3动画了。

功能 : 在上方的按钮上滑动，可以切换各个page,点击下方的各个page，也可以切换收缩还是展开状态。

初始效果预览

CSS+jQuery动画效果

body{

z-index: 0;

width: 100%;

min-height: 400px;

}

.pages{

position: absolute;

}

.current{

position: absolute;

z-index: 12 !important;

left: 0px !important;

}

.page1{

background-color: #a5cfff;

z-index: 1;

width: 300px;

height:280px;

top: 100px;

left: 0px;

}

.page2{

background-color: #b1ca54;

z-index: 2;

width: 250px;

height:270px;

top: 160px;

left: 0px;

}

.page3{

background-color: #c2c6c9;

z-index: 3;

width: 200px;

height:260px;

top: 220px;

left: 0px;

}

.page4{

background-color: #ef9e9c;

z-index: 4;

width: 150px;

height:250px;

top: 250px;

left: 0px;

}

$(function(){

// 增长

function increase($div,e){

var expstatus = $div.data("expstatus");

if(!expstatus){

// 没有展开过

$div.data("expstatus","yes");

}

var style = $div.attr("style");

$div.addClass("current").attr("styleold",style);

//

$div.stop();

$div.animate({

opacity:0.9,

width:"400px",

height: "400px",

top: "100px",

left: "0px"

},600)

.animate({

opacity:1.0

},30);

e.stopPropagation();

return false;

};

// 还原

function resize(e){

// 所有的都移除

var $page1 = $(".current.page1") ;

$page1.stop();

$page1.animate({

opacity:1.0,

width:"300px",

height: "280px",

top: "100px",

left: "0px"

},600,null,function(){

$page1.removeClass("current").attr("style","");

});

var $page2 = $(".current.page2") ;

$page2.stop();

$page2.animate({

opacity:1.0,

width:"250px",

height: "270px",

top: "160px",

left: "0px"

},600,null,function(){

$page2.removeClass("current").attr("style","");

});

var $page3 = $(".current.page3") ;

$page3.stop();

$page3.animate({

opacity:1.0,

width:"200px",

height: "260px",

top: "220px",

left: "0px"

},600,null,function(){

$page3.removeClass("current").attr("style","");

});

var $page4 = $(".current.page4") ;

$page4.stop();

$page4.animate({

opacity:1.0,

width:"150px",

height: "250px",

top: "250px",

left: "0px"

},600,null,function(){

$page4.removeClass("current").attr("style","");

});

//

var expstatus1 = $page1.data("expstatus");

if(expstatus1){

$page1.data("expstatus",null);

}

var expstatus2 = $page2.data("expstatus");

if(expstatus2){

$page2.data("expstatus",null);

}

var expstatus3 = $page3.data("expstatus");

if(expstatus3){

$page3.data("expstatus",null);

}

var expstatus4 = $page4.data("expstatus");

if(expstatus4){

$page4.data("expstatus",null);

}

if(e){

e.stopPropagation();

return false;

} else {

return true;

}

};

//

$("#button1").unbind("mouseover").bind("mouseover",function(e){

//

var $page1 = $(".page1");

// 添加特定的

return increase($page1,e);

}).unbind("mouseout").bind("mouseout",function(e){

return resize(e);

});

//

$("#button2").unbind("mouseover").bind("mouseover",function(e){

//

var $page2 = $(".page2");

// 添加特定的

return increase($page2,e);

}).unbind("mouseout").bind("mouseout",function(e){

return resize(e);

});

//

$("#button3").unbind("mouseover").bind("mouseover",function(e){

//

var $page3 = $(".page3");

// 添加特定的

return increase($page3,e);

}).unbind("mouseout").bind("mouseout",function(e){

return resize(e);

});

//

$("#button4").unbind("mouseover").bind("mouseover",function(e){

//

var $page4 = $(".page4");

// 添加特定的

return increase($page4,e);

}).unbind("mouseout").bind("mouseout",function(e){

return resize(e);

});

//

$(".pages").unbind("mouseover").bind("mouseover",function(e){

//

var $this = $(this);

// 添加特定的

//return increase($this,e);

}).unbind("mouseout").bind("mouseout",function(e){

// 所有的都移除

//return resize(e);

});

// 新的

$(".pages").unbind("click touchstart").bind("click touchstart",function(e){

//

var $this = $(this);

var expstatus = $this.data("expstatus");

if(!expstatus){

// 没有展开过

//

return increase($this,e);

} else {

return resize(e);

}

});

//

$("body").click(function(e){

// 所有的都移除

return resize(null);

});

});