jquery2014-09-11 00:37:34 6653
利用Jq-Animate制作的一个很简单的HTML全屏过渡动画。总共有3个变化,包括大小,位置,透明度等等的变化。
Js代码:
var guodu = { guoduIndex: 0, guoduWidth: 0, guoduHeight: 0, Init: function() { guodu.guoduWidth = $(document.body).width(); guodu.guoduHeight = $(window).height(); $(".one").css("width", "0px").css("height", "0px").css("top", guodu.guoduHeight / 2 "px").css("left", guodu.guoduWidth / 2 "px"); $(".item>div").css("margin-left", (guodu.guoduWidth - 800) / 2 "px").css("margin-top", (guodu.guoduHeight - 500) / 2 "px"); $(".two").css("left", guodu.guoduWidth "px"); $(".three").css("left", guodu.guoduWidth * 2 "px"); guodu.AnimateN(0); }, AnimateN: function(a) { switch (a) { case 0: $(".one").css("z-index",999).css("width","0px").css("height","0px"); $(".two").css("z-index",1); $(".one").css("display","block"); $("#mark").children().css("background-color", "#fff"); $(".two").css("left", guodu.guoduWidth "px"); $(".three").css("left", guodu.guoduWidth * 2 "px"); $(".one").animate({ width: guodu.guoduWidth "px", height: guodu.guoduHeight "px", left: guodu.guoduWidth / 2 - guodu.guoduWidth / 2 "px", top: guodu.guoduHeight / 2 - guodu.guoduHeight / 2 "px" }, 300); $(".markOne").css("background-color", "#0064c4").css("opacity", 1); guodu.guoduIndex = a; guodu.guoduIndex ; break; case 1: $("#mark").children().css("background-color", "#fff"); $(".markTwo").css("background-color", "#0064c4").css("opacity", 1); $(".two").css("z-index",999); $(".three").css("z-index",1); if (guodu.guoduIndex == 3) { $(".one").css("display","none"); $(".two").animate({ width: "500px", height: "300px", left: 200 "px", top: 200 "px" }, 800, function() { $(this).animate({ width: guodu.guoduWidth "0px", height: guodu.guoduHeight "px", left: guodu.guoduWidth / 2 - guodu.guoduWidth / 2 "px", top: guodu.guoduHeight / 2 - guodu.guoduHeight / 2 "px" }, 500,function(){ $(".three").css("left", guodu.guoduWidth * 2 "px").css("width", guodu.guoduWidth "px").css("height", guodu.guoduHeight "px").css("top","0px"); }); }); $(".three").animate({ width: "500px", height: "300px", left: guodu.guoduWidth - 700 "px", top: 200 "px" }); } else { $(".three").css("display","none"); $(".one").animate({ width: "500px", height: "300px", left: 200 "px", top: 200 "px" }, 500); $(".two").animate({ width: "500px", height: "300px", left: guodu.guoduWidth - 700 "px", top: 200 "px" }, 500, function() { $(this).animate({ width: guodu.guoduWidth "0px", height: guodu.guoduHeight "px", left: guodu.guoduWidth / 2 - guodu.guoduWidth / 2 "px", top: guodu.guoduHeight / 2 - guodu.guoduHeight / 2 "px" }, 500,function(){ $(".one").animate({ width: guodu.guoduWidth "0px", height: guodu.guoduHeight "px", left: "0px", top: "0px" }, 500); }); }); } break; case 2: $(".three").css("display","block").css("z-index",999); $("#mark").children().css("background-color", "#fff"); $(".markThree").css("background-color", "#0064c4").css("opacity", 1); $(".three").css("opacity", 0); $(".three").animate({ left: "0px", opacity: 1 }, 500); break; } guodu.guoduIndex = a; guodu.guoduIndex ; } }
彭亚欧个人博客原创文章,转载请注明出处
文章关键词:HTML Animate过渡效果,HTML过渡动画
文章固定链接:https://www.pengyaou.com/legendsz/front/codejq/MjE=.html
上一篇 HTML5+Jq导航菜单