簡單的移動端提示外掛程式

標籤：ini   top   文字   style   before   end   tran   splay   height   

javascript

function FEerNotice(opt){  var opt = opt || {}  this.opt = {    text: opt.text || "載入中..",    duration: opt.duration || 300,    type: opt.type || ‘loading‘  };  //產生指定的dom  this.createDom = function(){    var loadingDom = document.createElement(‘div‘);    loadingDom.id = ‘FEerloading‘;    loadingDom.className = ‘FEerloading hide‘;    var backDrop = document.createElement(‘div‘);    backDrop.className = ‘backDrop‘;    switch (this.opt.type){      case ‘loading‘:         var loadingIcon = document.createElement(‘i‘);        loadingIcon.className = "FEer-loading-icon";      break;      case ‘success‘:         var loadingIcon = document.createElement(‘i‘);        loadingIcon.className = "FEer-success-icon";      break;      case ‘failed‘:         var loadingIcon = document.createElement(‘i‘);        loadingIcon.className = "FEer-failed-icon";      break;        default:        var loadingIcon = document.createElement(‘i‘);    }    var txt = document.createTextNode(this.opt.text);    backDrop.appendChild(loadingIcon);    backDrop.appendChild(txt);    loadingDom.appendChild(backDrop);    return loadingDom;  }  //顯示  if(typeof this.show != ‘function‘){    FEerNotice.prototype.show = function(){      if(!document.getElementById(‘FEerloading‘)){        var dom = this.createDom();        document.getElementsByTagName(‘body‘)[0].appendChild(dom);        document.getElementById("FEerloading").className = ‘FEerloading‘;      }else{        document.getElementById("FEerloading").className = ‘FEerloading‘;      }    }  }  //隱藏  if(typeof this.hide != ‘function‘){    FEerNotice.prototype.hide = function(){      if(!!document.getElementById(‘FEerloading‘)){        document.getElementById("FEerloading").className = ‘FEerloading hide‘;      }    }  }  //定時顯示隱藏  if(typeof this.autoHide != ‘function‘){    FEerNotice.prototype.autoHide = function(){      if(!document.getElementById(‘FEerloading‘)){        var dom = this.createDom();        document.getElementsByTagName(‘body‘)[0].appendChild(dom);        document.getElementById("FEerloading").className = ‘FEerloading‘;      }else{        document.getElementById("FEerloading").className = ‘FEerloading‘;      }      setTimeout(function(){        document.getElementById("FEerloading").className = ‘FEerloading hide‘;      }.bind(this), this.opt.duration)    }  }}

css

#FEerloading{    position: fixed;    top: 0;    left: 0;    bottom: 0;    right: 0;    margin: auto;    display: flex;    align-items: center;    justify-content: center;    background: rgba(0,0,0,0.7);    z-index: 9999;}#FEerloading .backDrop{    min-width: 100px;    min-height: 100px;    text-align: center;    border-radius: 4px;    color: rgba(255,255,255,.8);    background: rgba(0,0,0,.8);}#FEerloading .backDrop i{    position: relative;    display: block;    margin: 10px auto 10px;    height: 50px;    width: 50px;    overflow: hidden;}#FEerloading .backDrop i.FEer-loading-icon{    background: #d7ad6a;    border-radius: 50%;}#FEerloading .backDrop i.FEer-loading-icon:before{    content: "";    position: absolute;    top: -98px;    left: 50%;    margin-left: -60px;    width: 120px;    height: 120px;    background: rgba(0,0,0,.5);    border-radius: 50px;    -webkit-animation: roll-before 7s linear infinite;}@-webkit-keyframes roll-before{    from {transform: rotate(0deg);}    to {transform: rotate(360deg);}}#FEerloading .backDrop i.FEer-loading-icon:after{    content: "";    position: absolute;    top: -97px;    left: 50%;    margin-left: -60px;    width: 120px;    height: 120px;    background: rgba(0,0,0,.5);    border-radius: 45px;    -webkit-animation: roll-after 5s linear infinite;}@-webkit-keyframes roll-after{    from {transform: rotate(0deg);}    to {transform: rotate(360deg);}}#FEerloading .backDrop i.FEer-success-icon:before{    content: "";    position: absolute;    left: 16px;    top: 10px;    width: 20px;    height: 35px;    border: 3px solid #fff;    border-top: 0;    border-left: 0;    transform: rotate(45deg);}#FEerloading .backDrop i.FEer-failed-icon:before{    content: "";    position: absolute;    left: 24px;    top: 10px;    width: 3px;    height: 35px;    transform: rotate(45deg);    background: #fff;}#FEerloading .backDrop i.FEer-failed-icon:after{    content: "";    position: absolute;    left: 24px;    top: 10px;    width: 3px;    height: 35px;    transform: rotate(-45deg);    background: #fff;}

 

調用方式說明：

入參介紹：
opt： {    text: opt.text || "載入中..",    duration: opt.duration || 300,    type: opt.type || ‘loading‘}
opt對象的參數欄位：
text，你需要顯示提示的文字；
duration，自動顯示/隱藏 提示的時間間隔；
type，提示類型 ‘loading‘ | ‘success‘ | ‘failed‘ 每個類型對應一種提示的樣式

原型方法：

show() ,即顯示提示；

show() ,隱藏提示；

autoHide() ,自動顯示隱藏提示；

調用舉例：

var fnotice = new FEerNotice({
　　text: "載入中..",
　　duration: 2000,
　　type: "loading"
})
fnotice.autoHide()

　　

簡單的移動端提示外掛程式