css部分
#public_box{100%;height:100%;position:fixed;top:0;left:0;z-index:100;background:rgba(0,0,0,.4);}
.spinner {
margin:-17px -75px;
150px;
position:absolute;
top:50%;
left:50%;
text-align: center;
}
.spinner > div {
30px;
height: 30px;
background-color: #1A1A1A;
border-radius: 100%;
display: inline-block;
-webkit-animation: bouncedelay 1.4s infinite ease-in-out;
animation: bouncedelay 1.4s infinite ease-in-out;
/* Prevent first frame from flickering when animation starts */
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
}
.spinner .bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.spinner .bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0.0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes bouncedelay {
0%, 80%, 100% {
transform: scale(0.0);
-webkit-transform: scale(0.0);
} 40% {
transform: scale(1.0);
-webkit-transform: scale(1.0);
}
}
/*remind*/
#remindBg{100%;position:fixed;bottom:90px;left:0;animation:moveRemind linear 0.6s;z-index:999;display:flex;justify-content:center;align-items:center;}
#remindBg #remindBox{max-70%;min-30%;line-height:16px;font-size:14px;padding:10px 15px;background:rgba(0,0,0,.7);color:white;border-radius:4px;text-align:center;}
@keyframes moveRemind{
0%{bottom:0;opacity:0;transform:scale(0.6);}
40%{bottom:90px;opacity:0.3;transform:scale(1.2);}
100%{bottom:90px;opacity:1;transform:scale(1);}
}
@-webkit-keyframes moveRemind{
0%{bottom:0;opacity:0;transform:scale(0.6);}
40%{bottom:90px;opacity:0.3;transform:scale(1.2);}
100%{bottom:90px;opacity:1;transform:scale(1);}
}
/*查看更多的按钮*/
.lookbtn{100%;height:44px;text-align:center;line-height:44px;font-size:12px;color:#1A1A1A;box-shadow:0px -2px 10px #E5E5E5;}
/*弹框样式*/
#bounces_bg{100%;height:100%;position:fixed;z-index:90;top:0;left:0;display:flex;justify-content:center;align-items:center;display:-webkit-flex;-webkit-justify-content:center;-webkit-align-items:center;background:rgba(51,51,51,.4);}
#bounces_bg .bounces_box{280px;border-radius:10px;background:white;font-size:16px;color:#1A1A1A;line-height:24px;text-align:center;-webkit-animation:bouncesMove .4s ease;animation:bouncesMove .4s ease;}
#bounces_bg .bounces_box .bounces_title{240px;padding:30px 20px;overflow:hidden;}
#bounces_bg .bounces_box .bounces_btn{100%;height:40px;border-top:1px solid #E5E5E5;display:flex;justify-content:space-between;align-items:center;display:-webkit-flex;-webkit-justify-content:space-between;-webkit-align-items:center;}
#bounces_bg .bounces_box .bounces_btn .bounces_off,#bounces_bg .bounces_box .bounces_btn .bounces_on{50%;height:40px;line-height:40px;position:relative;top:0;left:0;}
#bounces_bg .bounces_box .bounces_btn .bounces_on:after{content:'';1px;height:40px;position:absolute;left:0;top:0;background:#E5E5E5;}
@keyframes bouncesMove {
0%{
opacity:0;
transform:translateX(-100%);
-webkit-transform: translateX(-100%);
}
75% {
opacity:.75;
transform: translateX(30%);
-webkit-transform: translateX(30%);
}
100% {
opacity:1;
transform: translateX(0);
-webkit-transform: translateX(0);
}
}
js部分
function Publicfun(){
this.loading=function(){
//创建div标签
var public_box=document.createElement('div');
var str='<div class="spinner"><div class="bounce1"></div><div class="bounce2"></div><div class="bounce3"></div></div>';
public_box.id="public_box";
public_box.innerHTML=str;
//将新的div标签插入到页面
document.documentElement.appendChild(public_box);
//页面滑动事件阻止
public_box.ontouchmove=function(e){
e.preventDefault();
}
},
this.hideLoad=function(){
setTimeout(function(){
document.documentElement.removeChild(document.getElementById('public_box'))
},300);
},
this.remind=function(title){
var remindBg=document.createElement('div');
var str='<div id="remindBox">'+title+'</div>';
remindBg.id="remindBg";
remindBg.innerHTML=str;
//插入标签
document.documentElement.appendChild(remindBg);
setTimeout(function(){
document.documentElement.removeChild(remindBg)
},1000);
},
//弹框确认模板按钮
this.bounces=function(title,show){
//创建模板框
var bounces=document.createElement('div');
var str='<div id="bounces_bg"><div class="bounces_box"><div class="bounces_title">'+title+'</div><div class="bounces_btn"><div id="close_bounces_box" class="bounces_off">取消</div><div id="bounces_on_btn" class="bounces_on">确认</div></div></div></div>';
bounces.id="bounces_bg";
//插入模板布局
bounces.innerHTML=str;
//插入标签
document.documentElement.appendChild(bounces);
//点击取消按钮
document.getElementById('close_bounces_box').onclick=function(){
document.documentElement.removeChild(bounces);
};
//点击确认按钮
document.getElementById('bounces_on_btn').onclick=function(){
//执行回调函数
show();
//清除弹框
document.documentElement.removeChild(bounces);
}
//页面滑动事件阻止
bounces.ontouchmove=function(e){
e.preventDefault();
}
}
}
var publicFun=new Publicfun();