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

今天幫朋友寫了一些程式碼,自己覺得寫著寫著，好幾個版本以後，有點滿意，於是就貼出來。
都是定死了的。因為需求就只有4個元素。如果要用CSS的class來處理，那就需要用到CSS3動畫了。

複製程式碼 程式碼如下:

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 style = $div.attr("style");
$div.addClass ("current").attr("styleold",style); //
$ div.stop();
$div.animate({
不透明度:0.9,
寬度:"400px",
高度: "400px",
上: "100px",
左: "0px"
},600)
.animate({
不透明度: 1.0
},30);

e.stopPropagation(); 🎜>回傳false;
// 還原
函數調整大小(e){
// 所有的刪除
var $page1 = $(".current.page1") ;
$page1.stop();
$page1.animate({
opacity: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.removeClass("current") .attr("style","");
});

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

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

e.stopPropagation();
回傳錯誤；
};
//
$("#button1$("#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); //新增特定的
返回增加(
}).unbind("mouseout").bind("mouseout",function(e){
// 所有的都移除
return resize(e)
});
//
$("body").click(function(e){
// 所有的都刪除
return resize(e);
});
} );
腳本>
頭>

page1

;

page2

;

page3

;

page4

;

第一頁按鈕>
第2頁
第3頁
第4頁