一個CSS jQuery實現的放大縮小動畫效果_jquery

今天幫朋友寫了一些程式碼,自己覺得寫著寫著，好幾個版本以後，有點滿意，於是就貼出來。

都是定死了的。因為需求就只有4個元素。如果要用CSS的class來處理，那就需要用到CSS3動畫了。

功能 : 在上方的按鈕上滑動，可以切換各個page,點擊下方的各個page，也可以切換收縮還是展開狀態。
 
初始效果預覽

複製程式碼 程式碼如下:

CSS jQuery動畫效果



body{
z-index: 0;
寬度：100%;
最小高度：400px;
}
.pages{
位置：絕對;
}
.current{
位置：絕對；
z-index：12！重要;
左：0px！重要;
}
.page1{
背景顏色：#a5cfff;
z 索引：1;
寬度：300px;
高：280px；
頂部：100px；
左：0px;
}
.page2{
背景顏色：#b1ca54;
z 索引：2;
寬度：250px；
高度：270px； >上：160px;
左：0px;
}
.page3{
背景顏色：#c2c6c9;
z 索引：3;
寬度：200px;
高； ：260px;
上：220px;
左：0px;
}
.page4{
背景顏色：#ef9e9c;
z 索引：4；
背景顏色：#ef9e9c;
z 索引：4；
寬度：150px ;
高度：250px;
頂部：250px;
左：0px;
}
風格>


$(function(){
// 生長
function raise( $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({
不透明度:0.9,
寬度：“400px”，
高度：“400px”，
頂部： “100px”，
左：“0px”
},600）
.animate（{
opacity:1.0
},30);

e.stopPropagation( );
回傳false;
//
函數調整大小(e) {
// 所有的刪除
var $page1 = $(".current.page1") ;
$page1.stop();
$page1.animate({
不透明度：1.0，
寬度：“300px”，
高度：“280px”，
頂部：“ 100px”，
左：“0px”
},600,null,function( ){
$page1.removeClass("current").attr("style","");

var $page2 = $(".current.page2"); ;
$page2.stop();
$page2.animate({
不透明度:1.0,
寬度: "250px",
高度:"270px",
上: "160px",
左: "0px"
},600,null,function(){
$page2.remove ("current").attr("style","");
});

var $page3 = $(".current.page3") ;
$page3.stop( );
$page3.animate({
不透明度:1.0,
寬度:"200px",
高度:"260px",
上:"220px",
左:"0px "
},600,null,function(){
$page3.removeClass("current").attr("style","");
});

var $page4 = $(".current.page4") ;
$page4.stop();
$page4.animate({
不透明度:1.0,
寬度:"150px ",
高度:"250px",
上:"250px",
左:"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){
$page22 .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();
回傳錯誤;
} else {
回傳true;
}
};
//
$("#button1").unbind("mouseover").bind("mouseover",function(e){
//
var $page1 = $(". page1") ;
//增加特定的
回傳增加($page1,e);

}).unbind("mouseout").bind("mouseout",function(e) {
回傳調整大小(e);
//
$("#button2").unbind("mouseover").bind("mouseover",function(e){
//
var $page2 = $(". page2");
//增加特定的
回傳增加($page2,e);

}).unbind("mouseout").bind( "mouseout",function(e) {
回傳調整大小(e)});
//
$("#button3").unbind("mouseover").bind("mouseover", function(e){
//
var $page3 = $(". page3");
//增加特定的
回傳增加($page3,e);

}).unbind("mouseout").bind("mouseout",function(e) {
回傳調整大小(e)});
//
$("#button4"). unbind("mouseover").bind("mouseover",function(e){
//
var $page4 = $(". page4");
//新增特定的
返回增加($page4,e);

}).unbind("mouseout").bind("mouseout",function(e) {
回傳調整大小(e)});

//
$(".pages").unbind("mouseover").bind("mouseover",function(e){
//
var $this = $ (this) ; //新增特定的
//返回增加($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){
//沒有展開過
//
回傳增加($這個，e);
}else {
回傳調整大小(e);
}
});
//
$("body").click(function(e){
// 所有的都刪除
return resize(null);
});
});
腳本>
頭>

page1

;

page2

;

page3

;

page4

;

第一頁
第2頁
第3頁
第4頁

身體>