介绍 & lt;脚本类型=拔谋?javascript"比;
var w h,类名;
函数getSrceenWH () {
w=$(窗口).width ();
h=$(窗口).height ();
$ (& # 39;# dialogBg& # 39;) .width (w) .height (h);
}
窗口。onresize=function () {
getSrceenWH ();
}
$(窗口).resize ();
$(函数(){
getSrceenWH ();//显示弹框
$ (& # 39;。solution_class一个# 39;).click(函数(){
className=$(这).attr(& # 39;类# 39;);
$ (& # 39;# dialogBg& # 39;) .fadeIn (300);
$(& # 39;#对话框# 39;).removeAttr(& # 39;类# 39;).addClass(& # 39;动画& # 39;+名称+ & # 39;& # 39;).fadeIn ();
});//关闭弹窗
美元(& # 39;.claseDialogBtn # dialogBg& # 39;) .click(函数(){
$ (& # 39;# dialogBg& # 39;) .fadeOut(300年,函数(){
$(& # 39;#对话框# 39;).addClass (& # 39; bounceOutUp& # 39;) .fadeOut ();
});
});
});
& lt;/script> HTML & lt; div id=癲ialogBg"祝辞& lt;/div>
& lt; div id=癲ialog"类=癮nimated"比;
& lt; div类=癲ialogTop"祝辞
& lt; a href=癹avascript:“rel=巴獠縩ofollow"类=癱laseDialogBtn"祝辞关闭& lt;/a>
& lt;/div>
& lt;/div> css /*遮罩层*/.animated {
-webkit-animation-duration: 1.4秒;
动画:1.4秒;
-webkit-animation-fill-mode:;
animation-fill-mode:
}
@-webkit-keyframes bounceIn {
0% {
透明度:0;
-webkit-transform:规模(3);
变换:量表(3)
}
50% {
透明度:1;
-webkit-transform:规模(1.05);
变换:规模(1.05)
}
70% {
-webkit-transform:规模(。9);
变换:量表(。9)
}
100% {
透明度:1;
-webkit-transform:规模(1);
变换:规模(1)
}
}
@keyframes bounceIn {
0% {
透明度:0;
-webkit-transform:规模(3);
-ms-transform:规模(3);
变换:量表(3)
}
50% {
透明度:1;
-webkit-transform:规模(1.05);
-ms-transform:规模(1.05);
变换:规模(1.05)
}
70% {
-webkit-transform:规模(。9);
-ms-transform:规模(。9);
变换:量表(。9)
}
100% {
透明度:1;
-webkit-transform:规模(1);
-ms-transform:规模(1);
变换:规模(1)
}
}
.bounceIn {
-webkit-animation-name: bounceIn;
animation-name: bounceIn
}
@-webkit-keyframes bounceInDown {
0% {
透明度:0;
-webkit-transform: translateY (-2000 px);
变换:translateY (-2000 px);
}
60% {
透明度:1;
-webkit-transform: translateY (30 px);
变换:translateY (30 px);
}
80% {
-webkit-transform: translateY (-10 px);
变换:translateY (-10 px);
}
100% {
-webkit-transform: translateY (0);
变换:translateY (0);
}
}
@keyframes bounceInDown {
0% {
透明度:0;
-webkit-transform: translateY (-2000 px);
-ms-transform: translateY (-2000 px);
变换:translateY (-2000 px);
}
60% {
透明度:1;
-webkit-transform: translateY (30 px);
-ms-transform: translateY (30 px);
变换:translateY (30 px);
}
80% {
-webkit-transform: translateY (-10 px);
-ms-transform: translateY (-10 px);
变换:translateY (-10 px);
}
100% {
-webkit-transform: translateY (0);
-ms-transform: translateY (0);
变换:translateY (0);
}
}
.bounceInDown {
-webkit-animation-name: bounceInDown;
animation-name: bounceInDown;
}
@-webkit-keyframes bounceOutUp {
0% {
-webkit-transform: translateY (0);
变换:translateY (0);
}
20% {
透明度:1;
-webkit-transform: translateY (20 px);
变换:translateY (20 px);
}
100% {
透明度:0;
-webkit-transform: translateY (-2000 px);
变换:translateY (-2000 px);
}
}
@keyframes bounceOutUp {
0% {
-webkit-transform: translateY (0);
-ms-transform: translateY (0);
变换:translateY (0);
}
20% {
透明度:1;
-webkit-transform: translateY (20 px);
-ms-transform: translateY (20 px);
变换:translateY (20 px);
}
100% {
透明度:0;
-webkit-transform: translateY (-2000 px);
-ms-transform: translateY (-2000 px);
变换:translateY (-2000 px);
}
}
.bounceOutUp {
-webkit-animation-name: bounceOutUp;
animation-name: bounceOutUp;
}
@-webkit-keyframes转入{
0% {
透明度:0;
-webkit-transform: translateX(-100%)旋转(-120度);
变换:translateX(-100%)旋转(-120度);
}
100% {
透明度:1;
-webkit-transform: translateX (0 px)旋转(0度);
旋转变换:translateX (0 px)(0度);
}
}
@keyframes转入{
0% {
透明度:0;
-webkit-transform: translateX(-100%)旋转(-120度);
-ms-transform: translateX(-100%)旋转(-120度);
变换:translateX(-100%)旋转(-120度);
}
100% {
透明度:1;
-webkit-transform: translateX (0 px)旋转(0度);
-ms-transform: translateX (0 px)旋转(0度);
旋转变换:translateX (0 px)(0度);
}
}
.rollIn {
-webkit-animation-name:转入;
animation-name:转入;
}
@-webkit-keyframes flipInX {
0% {
-webkit-transform:角度(400 px) rotateX(90度);
变换:角度(400 px) rotateX(90度);
透明度:0;
}
40% {
-webkit-transform:角度(400 px) rotateX(-10度);
变换:角度(400 px) rotateX(-10度);
}
70% {
-webkit-transform:角度(400 px) rotateX(10度);
变换:角度(400 px) rotateX(10度);
}
100% {
-webkit-transform:角度(400 px) rotateX(0度);
变换:角度(400 px) rotateX(0度);
透明度:1;
}
}
@keyframes flipInX {
0% {
-webkit-transform:角度(400 px) rotateX(90度);
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
这篇文章主要讲解了jquery + css3如何实现经典弹出层效果,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
可能出现的情况
1)一列都有,按顺序弹出对应的弹出层
2)只有单个一个弹出层
3)不按顺序不按规律随机弹出层
jquery弹出层解决第一种情况
参考资料
移动端之“css3多动画弹框”
引入jquery
JS代码这里关闭用的css3效果实现
