仿回收站效果设计html,CSS3 animate pop, flow下的弹框与回收站交互效果 » 张鑫旭-鑫空间-鑫生活...

展示

提示：

1. Chrome浏览器下，浏览器窗体下边缘与上面按钮下边缘对齐有最佳交互效果。

2. 点击垃圾箱可以“吐出”回收的图片。

代码

CSS代码：

/* Copyright (c) 2012 Dan Eden */

.animated {

-webkit-animation-fill-mode: both;

-moz-animation-fill-mode: both;

-webkit-animation-duration: 1s;

-moz-animation-duration: 1s;

}

@-webkit-keyframes tada {

0% {-webkit-transform: scale(1);}

10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}

30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}

40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}

100% {-webkit-transform: scale(1) rotate(0);}

}

@-moz-keyframes tada {

0% {-moz-transform: scale(1);}

10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}

30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}

40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}

100% {-moz-transform: scale(1) rotate(0);}

}

.tada {

-webkit-animation-name: tada;

-moz-animation-name: tada;

}

HTML代码：

×

提示框

您确定将该图片移入回收站？

确定

取消

JS代码：

// 浮动提示框的元素们

var eleConfirm = $("#confirm"), eleClose = $("#close");

// 图片和回收站元素

var eleImage = $("#image"), eleRecycle = $("#recycle");

// 弹框关闭的方法

var funConfirmOut = function() { eleConfirm.addClass("reverse out").removeClass("in"); }

// 点击弹框右上角的关闭和取消按钮

$("#close, #cancel").bind("click", funConfirmOut);

// 点击确定按钮按钮

$("#ensure").bind("click", function() {

eleImage.addClass("out reverse").removeClass("in");

setTimeout(function() {

eleImage.css("visibility", "hidden");

eleRecycle.addClass("tada");

setTimeout(function() { eleRecycle.removeClass("tada"); }, 1000);

}, 300);

funConfirmOut();

});

// 点击垃圾箱

eleRecycle.bind("click", function() {

eleImage.css("visibility", "visible").removeClass("out reverse").addClass("in");

});

// 点击移除图片按钮，出现提示框

$("#button").bind("click", function() {

var scrollTop = $(document.body).scrollTop();

if (!eleImage.hasClass("out")) {

eleConfirm.css({

top: scrollTop + ($(window).height() - eleConfirm.height()) / 2

}).removeClass("reverse out").addClass("in");

} else {

eleRecycle.addClass("tada");

setTimeout(function() { eleRecycle.removeClass("tada"); }, 1000);

}

});