CSS jQuery_jquery によって実装されたズームイン アニメーション効果

今日、友人がコードを書くのを手伝ったので、いくつかのバージョンを書き上げた後、少し満足したので投稿しました。

彼らは皆、運命にあります。なぜなら、必要な要素はたったの4つだけだからです。 CSS クラスを使用して処理したい場合は、CSS3 アニメーションを使用する必要があります。

機能: 上のボタンをスワイプしてページを切り替え、下の各ページをクリックして、縮小状態と展開状態を切り替えます。

初期エフェクトプレビュー

コードをコピー コードは次のとおりです:

CSS jQueryアニメーション画效果



body{
z-index: 0;
幅: 100%;
最小高さ: 400px;
}
.pages{
位置: 絶対;
}
.current{
位置: 絶対;
z インデックス: 12 !重要;
左: 0px !重要;
}
.page1{
背景色: #a5cfff;
z インデックス: 1;
幅: 300ピクセル;
高さ:280ピクセル;
上: 100ピクセル;
左: 0px;
}
.page2{
背景色: #b1ca54;
z-インデックス: 2;
幅: 250px;
高さ:270ピクセル;
トップ: 160ピクセル;
左: 0px;
}
.page3{
背景色: #c2c6c9;
z インデックス: 3;
幅: 200px;
高さ:260ピクセル;
トップ: 220ピクセル;
左: 0px;
}
.page4{
背景色: #ef9e9c;
z インデックス: 4;
幅: 150px;
高さ:250ピクセル;
トップ: 250ピクセル;
左: 0px;
}



$(function(){
// 增长
function増加($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();
return
}; {
// 全ての都移除
var $page1 = $(".current.page1") ;
$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.removeClass("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){
$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();
false を返します。
} else {
true を返します。
}
};
//
$("#button1").unbind("mouseover").bind("mouseover",function(e){
//
var $page1 = $(". page1");
// 追加特定の
return増加($page1,e);

}).unbind("mouseout").bind("mouseout",function(e) {
return サイズ変更(e)

});
//
$("#button2").unbind("mouseover").bind("mouseover",function(e){
//
var $page2 = $(". page2");
// 追加特定の
return増加($page2,e);

}).unbind("mouseout").bind("mouseout",function(e) {
return サイズ変更(e)
});
//
$("#button3").unbind("mouseover").bind("mouseover",function(e){
//
var $page3 = $(". page3");
// 追加特定の
return増加($page3,e);

}).unbind("mouseout").bind("mouseout",function(e) {
return サイズ変更(e)
});
//
$("#button4").unbind("mouseover").bind("mouseover",function(e){
//
var $page4 = $(". page4");
// 追加特定の
return増加($page4,e);

}).unbind("mouseout").bind("mouseout",function(e) {
return サイズ変更(e)
});

//
$(".pages").unbind("mouseover").bind("mouseover",function(e){
//
var $this = $ (this);
// 追加特定の
//return増加($this,e)
}).unbind("mouseout").bind("mouseout",function(e){
// 全ての都移除
//returnsize(e)
});
// 新しい
$(".pages").unbind("click touchstart").bind("click touchstart",function(e){
//
var $this = $(this);
var expstatus = $this.data("expstatus");
if(!expstatus){
// 没有展开过
//
戻り増加($これ、e);
}else {
returnsize(e);
}
});
//
$("body").click(function(e){
// すべて的都移除
returnsize(null);
});
});

page1

page2

page3

page4

第一页
第2页
第3页
第4页

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。