标签:des style class blog code java
javascript代码
var msg={ count:0, show:function(value,time,width){ //type:定义显示样式,三种选择:success,notice,error;,不选则默认为success; //style:仅限定义提示层位置使用,默认底层提示栏上册15px处 var me=document; var comDom=me.createElement("div"); comDom.className="message-Container"; comDom.setAttribute(‘name‘,‘i_message-Container‘); comDom.id="iMessage"+this.count; comDom.style.width=window.innerWidth+"px"; var mDom=me.createElement("div"); mDom.style.webkitAnimationDuration=time+"s"; mDom.className=" message-style message-Animation"; if(width){ mDom.style.cssText+=" width:"+width+"px"; } mDom.innerHTML=value; comDom.appendChild(mDom); var hisMessge=me.getElementsByName(‘i_message-Container‘); var i=hisMessge.length-1; for(i;i>=0;i--){ if(hisMessge[i]){me.body.removeChild(hisMessge[i]);} else{break} } me.body.appendChild(comDom); comDom.style.cssText+=" top:"+(window.innerHeight/2-15)+"px"; this.count++; this.destory(comDom.id,time); }, destory:function(id,time){ var desMe=function(){ var cDom=document.getElementById(id); if(cDom){ document.body.removeChild(cDom); } }; setTimeout(desMe,time*1000+500); } }
css代码
/*开始-自定义弹出提示层*/ .message-style{padding:0px 10px;margin:0 auto;min-width:100px;max-width:90%;text-align:center;position:relative;opacity: 0;-webkit-border-radius: 3px;background: #383838;border: 1px solid #202020;color: #fff;z-index: 1000;height: 30px;line-height: 30px;width: 80px;font-size: 14px;-webkit-box-shadow:1px 1px 3px #202020;} @-webkit-keyframes message-Transition{0%{opacity: 0;}10%{opacity:1;}90%{opacity:1;}100%{opacity:0;}} .message-Animation{-webkit-animation-name:message-Transition;-webkit-animation-duration:3s;-webkit-animation-timing-function:linear;-webkit-animation-iteration-count:1;} .message-Container{text-align:center;width:100%;border:0px;padding:0px;position:fixed;}
调用方法:
msg.show(‘hello word‘,2)
标签:des style class blog code java
原文地址:http://www.cnblogs.com/lvchat/p/3808647.html