CSS jQuery_jquery によって実装されたズームインアニメーション効果-jsチュートリアル-php.cn

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

WBOY

リリース： 2016-05-16 17:21:34

オリジナル

1070 人が閲覧しました

今日、友人がコードを書くのを手伝ったので、いくつかのバージョンを書き上げた後、少し満足したので投稿しました。
彼らはみな運命にある。なぜなら、必要な要素はたったの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 style = $div.attr("style");
$div.addClass ("current").attr("styleold",style);
//
$div.stop();
$div.animate({
opacity:0.9,
width :"400px",
高さ: "400px",
上: "100px",
左: "0px"
},600)
.animate({
不透明度: 1.0
},30);

e.stopPropagation();
return false; // すべての都移除
var $page1 = $(".current.page1") ;
$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();
opacity:1.0,
width :"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","");
});

e.stopPropagation();
false を返します。
};
//
$("#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)
});
//
$("body").click(function(e){
// 全て的都移除
returnsize(e);
});
});

page1

page2

page3

page4

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

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