提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  前端

当前栏目

javascript右下角弹层及自动隐藏(自己编写)

JavaScript 自己 编写 右下角 自动隐藏
2023-06-13 09:15:12 时间
在编写项目中总会需要有个右下角弹层提示公告的需求，怎么用更简单方面，更简洁代码，实现更好用户体验这个就是我们的所要做的内容。市场这块弹层很多，但功能不尽如人意。下面分享早些时候自己编写，以及现在还在应用的自动弹层。

弹层示例图：
 
实现代码如下：

Css样式：
复制代码代码如下:

/*通知提示层*/
.msg_info{font-size:12px;text-align:left;z-index:100;position:absolute;display:none;bottom:0;right:0;overflow:hidden;}
.msg_infoh3{float:left;margin:0px;height:0px;width:100%;color:#fff;height:30px;}
.msg_infoh3span,.msg_infoh3b,.msg_infoh3em,.msg_infosmallspan,.msg_infosmallb,.msg_infosmallem{background-image:url(/img/msg_bg.png);}
.msg_infoh3b,.msg_infoh3em,.msg_infosmallb,.msg_infosmallem{float:left;font-size:1px;width:6px;height:30px;}
.msg_infoh3b{background-position:0px0px;}
.msg_infoh3em{background-position:0px-32px;}
.msg_infoh3span{background-position:0px-64px;float:left;line-height:30px;}
.msg_infoh3spanfont{float:left;text-align:left;overflow:hidden;margin-left:12px;}
.msg_infoh3spani{float:right;margin-right:10px;cursor:pointer;font-style:normal;}
.message_content{float:left;color:#515F62;overflow:hidden;border-left:solid1px#C2C2C2;background-color:#F1F2F7;margin-top:-1px;min-height:145px;height:auto!important;height:145px;}
.message_contentdiv{float:left;margin:0px;padding:10px14px;height:100%;position:relative;}
.message_contentdivp.message_txt{float:left;width:100%;height:80%;margin:0px;padding:0px;min-height:60px;}
.message_contentdivi{float:left;font-style:normal;margin-top:2px;text-align:right;position:fixed;bottom:2px;right:4px;}
.message_contentb.bright{float:right;width:1px;font-size:1px;background-color:#C2C2C2;border-right:solid1px#828282;height:100%;}
.msg_infosmall{float:left;width:100%;height:5px;font-size:5px;}
.msg_infosmallspan{background-position:0px-101px;height:5px;float:left;}
.msg_infosmallb{height:5px;background-position:0px-96px;}
.msg_infosmallem{height:5px;background-position:0px-106px;float:right;}

Js部分：

自定义右下角弹层函数
复制代码代码如下:

//右下角弹层
functionMessager(){
this.layer={"width":200,"height":100};
this.title="信息提示";
this.time=4000;
this.anims={"type":"slide","speed":600};
this.timer1=null;
this.isTiming=false;
this.obj_id="msg_"+$(document.body).find("msg_info").length;

var_obj,_title,_anims,_time;
_timer2=null;
//初始化
this.inits=function(title,text){
_anims=this.anims;
_title=title;
var_html="<divclass="msg_info"+this.obj_id+"">";
_html+="<h3>";
_html+="<b></b>";
_html+="<spanclass="msg_bg_middle">";
_html+="<font>"+title+"</font>";
_html+="<iclass="message_close">×</i>";
_html+="</span>";
_html+="<em></em>";
_html+="</h3>";
_html+="<divclass="message_content">";
_html+="<divclass="msg_txt">"+text+"</div>";
_html+="<bclass="bright"></b>";
_html+="</div>";
_html+="<small><b></b><spanclass="msg_bg_middle"></span><em></em></small>";
_html+="</div>";
$(document.body).prepend(_html);

_obj=$("."+this.obj_id);
if($.browser.msie){
_obj.css("bottom",-5);
}
_obj.css("width",this.layer.width);
_obj.find(".msg_bg_middle").css("width",this.layer.width-12);
_obj.find(".message_content").css("width",this.layer.width-2);
_obj.find(".msg_txt").css("width",this.layer.width-34);
_obj.find(".message_close").click(function(){
setTimeout(function(){closeMsg();},1);
});
_obj.hover(function(){
clearTimeout(timer1);
clearInterval(_timer2);
_timer2=timer1=null;
},function(){
timer1=setTimeout(function(){closeMsg();},_time*1000);
timing(_time*1000);
});
};
//显示
this.show=function(title,text,time){
if(title==0||!title)title=this.title;
this.inits(title,text);
if(time>=0)this.time=time;

switch(this.anims.type){
case"slide":_obj.slideDown(this.anims.speed);break;
case"fade":_obj.fadeIn(this.anims.speed);break;
case"show":_obj.show(this.anims.speed);break;
default:_obj.slideDown(this.anims.speed);break;
}
this.rmmessage(this.time);
};
//设置宽高
this.lays=function(width,height){
if(width!=0&&width)this.layer.width=width;
if(height!=0&&height)this.layer.height=height;
};
//呈现属性
this.anim=function(type,speed){
if(type!=0&&type)this.anims.type=type;
if(speed!=0&&speed){
switch(speed){
case"slow":;break;
case"fast":this.anims.speed=200;break;
case"normal":this.anims.speed=400;break;
default:this.anims.speed=speed;break;
}
}
};
//移除层时间
this.rmmessage=function(time){
if(time>0){
timer1=setTimeout(function(){closeMsg();},time);
if(this.isTiming){
timing(time);
}
}
};
//计时
timing=function(time){
_time=time/1000;
_timer2=setInterval(function(){
_obj.find(".msg_bg_middle").find("font").html(_title+"["+(--_time)+"秒后自动关闭]");
},1000);
}
//关闭层
closeMsg=function(){
switch(_anims.type){
case"slide":_obj.slideUp(_anims.speed);break;
case"fade":_obj.fadeOut(_anims.speed);break;
case"show":_obj.hide(_anims.speed);break;
default:_obj.slideUp(_anims.speed);break;
}
setTimeout(function(){_obj.remove();},_anims.speed);
}
}

示例函数：
复制代码代码如下:
varmsg="<pclass="message_txt">当前有"+json.total+"个待审核用户等待您审核。</p><i>"+json.stadate+"</i>";
varmsgDiv=newMessager();
msgDiv.isTiming=true;
msgDiv.lays(300,180);
msgDiv.show("用户审核提醒",msg,10000);

相关文章