<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=1.0" />
<style>
body,div,p,span{margin:0;padding:0;}
body{
font-family: "Microsoft Yahei","微软雅黑",Arial,Tahoma;
font-size:14px;
}
.btn-container{
width:300px;
height:100px;
margin:100px auto;
}
/*插件css*/
#animationTipBox{
width:180px;
height:auto;
background-color:#fff;
border-radius:8px;
position:fixed;
left:50%;
top:50%;
margin-left:-90px;
margin-top:-75px;
z-index:1001;
-webkit-animation:alertAnimation 0.3s ease-in-out 0 1;
}
#sm-load{
width:20px;
height: 20px;
padding:0;
background:none;
padding:0;
position:relative;
float:left;
vertical-align:middle;
margin-right:5px;
top:0;
left:0;
margin: 0;
-webkit-animation:none;
}
#sm-load .load{
width: 20px;
height: 20px;
border:none;
margin:0 auto;
top:0;
}
#sm-load .icon_box{
margin:0 auto;
}
#sm-load .load .cirBox1,#sm-load .load .cirBox2,#sm-load .load .cirBox3{
width: 20px;
height: 20px;
position: absolute;
left: 0;
top: 0;
}
#sm-load .load .cirBox1 > div,#sm-load .load .cirBox2 > div,#sm-load .load .cirBox3 > div{
width: 4px;
height:4px;
border-radius: 100%;
background-color: #fff;
position: absolute;
}
#sm-load .load .icon_box{
width:20px;
height:20px;
}
#animationTipBox .icon{
position:relative;
width:80px;
height:80px;
border-radius:50px;
border:4px solid #66cc33;
margin:15px auto 5px auto;
}
#animationTipBox .icon_box{
width:80px;
height:80px;
margin:0 auto;
text-align:center;
position:relative;
}
.tip .icon{
width:80px;
height:80px;
background-color:#66cc33;
border-radius:100%;
color:#fff;
font-size:80px;
text-align:center;
line-height:80px;
}
#animationTipBox .lose .icon{
border-color:#FF9090;
}
#animationTipBox .lose .icon_box{
-webkit-animation:lose_Animation 0.5s;
}
#animationTipBox .dec_txt{
font-size:16px;
text-align:center;
color:#666;
line-height:26px;
height:26px;
padding:5px 0 10px 0;
}
.success .line_short{
width:25px;
height:5px;
position:absolute;
left: 14px;
top: 46px;
border-radius:4px;
background-color:#66cc33;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
-webkit-animation:success_short_Animation 0.65s;
}
.success .line_long{
width:47px;
height:5px;
position:absolute;
right: 8px;
top: 38px;
border-radius:4px;
background-color:#66cc33;
-webkit-transform:rotate(-45deg);
-webkit-animation:success_long_Animation 0.65s;
}
.lose .line_left,.lose .line_right{
width:47px;
height:5px;
position:absolute;
left: 17px;
top: 37px;
border-radius:4px;
background-color:#FF9090;
-webkit-transform:rotate(45deg);
transform:rotate(45deg);
}
.lose .line_right{
right: 11px;
top: 37px;
-webkit-transform:rotate(-45deg);
transform:rotate(-45deg);
}
/* tipBoxKeyFrames */
@keyframes alertAnimation{
0% {
transform: scale(0.5);
}
45% {
transform: scale(1.25);
}
80% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
@-webkit-keyframes alertAnimation{
0% {
-webkit-transform: scale(0.5); }
45% {
-webkit-transform: scale(1.25); }
80% {
-webkit-transform: scale(0.95); }
100% {
-webkit-transform: scale(1);
}
}
/* tipBoxKeyFrames */
/*success_Animation*/
@-webkit-keyframes success_short_Animation{
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -4px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
@keyframes success_short_Animation{
0% {
width: 0;
left: 1px;
top: 19px;
}
54% {
width: 0;
left: 1px;
top: 19px;
}
70% {
width: 50px;
left: -4px;
top: 37px;
}
84% {
width: 17px;
left: 21px;
top: 48px;
}
100% {
width: 25px;
left: 14px;
top: 45px;
}
}
@-webkit-keyframes success_long_Animation{
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
@keyframes success_long_Animation{
0% {
width: 0;
right: 46px;
top: 54px;
}
65% {
width: 0;
right: 46px;
top: 54px;
}
84% {
width: 55px;
right: 0px;
top: 35px;
}
100% {
width: 47px;
right: 8px;
top: 38px;
}
}
/*success_Animation*/
/* ---------------------------------------------------------------------------------------------------------------------------- */
/*lose_Animation*/
@-webkit-keyframes lose_Animation{
0%{
-webkit-transform:scale(0.6);
opacity:0.2;
}
50% {
-webkit-transform:scale(0.6);
opacity:0.5;
}
80% {
-webkit-transform:scale(1.15);
opacity:0.8;
}
100% {
-webkit-transform:scale(1);
opacity:1.0;
}
}
/*lose_Animation*/
/*load_Animation*/
@-webkit-keyframes load_Animation{
0%{
-webkit-transform:scale(0.6);
opacity:0.2;
}
50% {
-webkit-transform:scale(0.6);
opacity:0.5;
}
80% {
-webkit-transform:scale(1.15);
opacity:0.8;
}
100% {
-webkit-transform:scale(1);
opacity:1.0;
}
}
/*load_Animation*/
.load{
position: relative;
width: 60px;
height: 80px;
border-radius: 50px;
border: 4px solid #fff;
margin: 15px auto 5px auto;
top: 10px;
}
.load .icon_box{
margin:10px auto;
width:60px;
height:60px;
}
.load .cirBox1,.load .cirBox2,.load .cirBox3{
width:60px;
height:60px;
position:absolute;
left:0;
top:0;
}
.load .cirBox1 > div,.load .cirBox2 > div,.load .cirBox3 > div{
width:10px;
height:10px;
border-radius:100%;
background-color:#ccc;
position:absolute;
}
.load .cirBox1{
-webkit-transform:rotate(30deg);
}
.load .cirBox2{
-webkit-transform:rotate(60deg);
}
.load .cirBox3{
-webkit-transform:rotate(90deg);
}
.load .cir1{
left:0;
top:0;
}
.load .cir2{
right:0;
top:0;
}
.load .cir3{
right:0;
bottom:0;
}
.load .cir4{
left:0;
bottom:0;
}
.load .cir1,.load .cir2,.load .cir3,.load .cir4{
-webkit-animation:cir_Animation 1.2s ease 0 infinite;
}
.cirBox1 .cir2{
-webkit-animation-delay:-1.1s;
}
.cirBox1 .cir3{
-webkit-animation-delay:-0.8s;
}
.cirBox1 .cir4{
-webkit-animation-delay:-0.5s;
}
.cirBox2 .cir2{
-webkit-animation-delay:-1.0s;
}
.cirBox2 .cir3{
-webkit-animation-delay:-0.7s;
}
.cirBox2 .cir4{
-webkit-animation-delay:-0.4s;
}
.cirBox3 .cir2{
-webkit-animation-delay:-0.9s;
}
.cirBox3 .cir3{
-webkit-animation-delay:-0.6s;
}
.cirBox3 .cir4{
-webkit-animation-delay:-0.3s;
}
@-webkit-keyframes cir_Animation{
0%,80%,100%{
-webkit-transform:scale(0.4);
}
40%{
-webkit-transform:scale(1.0);
}
}
.mask{
width:100%;
height:100%;
background-color:#000;
opacity:.8;
position: fixed;
left: 0;
top: 0;
z-index:1000;
}
</style>
</head>
<body>
<div class="btn-container">
<input type="button" id="success" value="成功" />
<input type="button" id="error" value="错误" />
<input type="button" id="load" value="正在加载" />
<input type="button" id="tip" value="提示" />
</div>
</body>
</html>
<script src="http://libs.baidu.com/zepto/0.8/zepto.min.js"></script>
<script type="text/javascript">
/*
* @弹出提示层 ( 加载动画(load), 提示动画(tip), 成功(success), 错误(error), )
* @method tipBox
* @description 默认配置参数
* @time 2014-12-19
* @param {Number} width -宽度
* @param {Number} height -高度
* @param {String} str -默认文字
* @param {Object} windowDom -载入窗口 默认当前窗口
* @param {Number} setTime -定时消失(毫秒) 默认为0 不消失
* @param {Boolean} hasMask -是否显示遮罩
* @param {Boolean} hasMaskWhite -显示白色遮罩
* @param {Boolean} clickDomCancel -点击空白取消
* @param {Function} callBack -回调函数 (只在开启定时消失时才生效)
* @param {String} type -动画类型 (加载,成功,失败,提示)
* @example
* new TipBox();
* new TipBox({type:'load',setTime:1000,callBack:function(){ alert(..) }});
*/
function TipBox(cfg){
this.config = {
width : 180,
height : 150,
str : '正在处理',
windowDom : window,
setTime : 0,
hasMask : true,
hasMaskWhite : false,
clickDomCancel : false,
callBack : null,
type : 'success'
}
$.extend(this.config,cfg);
//存在就retrun
if(TipBox.prototype.boundingBox) return;
//初始化
this.render(this.config.type);
return this;
};
//外层box
TipBox.prototype.boundingBox = null;
//渲染
TipBox.prototype.render = function(tipType,container){
this.renderUI(tipType);
//绑定事件
this.bindUI();
//初始化UI
this.syncUI();
$(container || this.config.windowDom.document.body).append(TipBox.prototype.boundingBox);
};
//渲染UI
TipBox.prototype.renderUI = function(tipType){
TipBox.prototype.boundingBox = $("<div id='animationTipBox'></div>");
tipType == 'load' && this.loadRenderUI();
tipType == 'success' && this.successRenderUI();
tipType == 'error' && this.errorRenderUI();
tipType == 'tip' && this.tipRenderUI();
TipBox.prototype.boundingBox.appendTo(this.config.windowDom.document.body);
//是否显示遮罩
if(this.config.hasMask){
this.config.hasMaskWhite ? this._mask = $("<div class='mask_white'></div>") : this._mask = $("<div class='mask'></div>");
this._mask.appendTo(this.config.windowDom.document.body);
}
//定时消失
_this = this;
!this.config.setTime && typeof this.config.callBack === "function" && (this.config.setTime = 1);
this.config.setTime && setTimeout( function(){ _this.close(); }, _this.config.setTime );
};
TipBox.prototype.bindUI = function(){
_this = this;
//点击空白立即取消
this.config.clickDomCancel && this._mask && this._mask.click(function(){_this.close();});
};
TipBox.prototype.syncUI = function(){
TipBox.prototype.boundingBox.css({
width : this.config.width+'px',
height : this.config.height+'px',
marginLeft : "-"+(this.config.width/2)+'px',
marginTop : "-"+(this.config.height/2)+'px'
});
};
//提示效果UI
TipBox.prototype.tipRenderUI = function(){
var tip = "<div class='tip'>";
tip +=" <div class='icon'>i</div>";
tip +=" <div class='dec_txt'>"+this.config.str+"</div>";
tip += "</div>";
TipBox.prototype.boundingBox.append(tip);
};
//成功效果UI
TipBox.prototype.successRenderUI = function(){
var suc = "<div class='success'>";
suc +=" <div class='icon'>";
suc += "<div class='line_short'></div>";
suc += "<div class='line_long'></div> ";
suc += "</div>";
suc +=" <div class='dec_txt'>"+this.config.str+"</div>";
suc += "</div>";
TipBox.prototype.boundingBox.append(suc);
};
//错误效果UI
TipBox.prototype.errorRenderUI = function(){
var err = "<div class='lose'>";
err += " <div class='icon'>";
err += " <div class='icon_box'>";
err += " <div class='line_left'></div>";
err += " <div class='line_right'></div>";
err += " </div>";
err += " </div>";
err += "<div class='dec_txt'>"+this.config.str+"</div>";
err += "</div>";
TipBox.prototype.boundingBox.append(err);
};
//加载动画load UI
TipBox.prototype.loadRenderUI = function(){
var load = "<div class='load'>";
load += "<div class='icon_box'>";
for(var i = 1; i < 4; i++ ){
load += "<div class='cirBox"+i+"'>";
load += "<div class='cir1'></div>";
load += "<div class='cir2'></div>";
load += "<div class='cir3'></div>";
load += "<div class='cir4'></div>";
load += "</div>";
}
load += "</div>";
load += "</div>";
load += "<div class='dec_txt'>"+this.config.str+"</div>";
TipBox.prototype.boundingBox.append(load);
};
//关闭
TipBox.prototype.close = function(){
TipBox.prototype.destroy();
this.destroy();
this.config.setTime && typeof this.config.callBack === "function" && this.config.callBack();
};
//销毁
TipBox.prototype.destroy = function(){
this._mask && this._mask.remove();
TipBox.prototype.boundingBox && TipBox.prototype.boundingBox.remove();
TipBox.prototype.boundingBox = null;
};
</script>
<script type="text/javascript">
//成功
$("#success").click(function(){
new TipBox({type:'success',str:'操作成功',setTime:1500});
});
//错误
$("#error").click(function(){
new TipBox({type:'error',str:'对不起,出错了!',setTime:1500});
});
//提示
$("#tip").click(function(){
new TipBox({type:'tip',str:'这是提示信息',setTime:1500});
});
//加载
$("#load").click(function(){
new TipBox({type:'load',str:"努力加载中..",setTime:1500,callBack:function(){
new TipBox({type:'success',str:'操作成功',setTime:1500});
}});
});
</script>
