In the writing project will always need to have a lower right corner of the bullet layer prompts the requirements of the bulletin, how to use simpler aspects, more concise code, to achieve a better user experience this is what we want to do content. The market is a lot of shells, but the function is not satisfactory. The following shares the automatic pinball layer that was written earlier and is now in use.
Bullet Layer Sample diagram:
The implementation code is as follows:
CSS style:
Copy Code code as follows:
/* Notification TIP layer * *
. msg_info{font-size:12px; text-align:left; z-index:100; position:absolute; display:none; bottom:0; right:0; OVERFL Ow:hidden;}
. msg_info h3{float:left;margin:0px;height:0px;width:100%; color: #fff; height:30px;}
Msg_info H3 span,. Msg_info h3 B,. msg_info h3 em,. Msg_info small span,. Msg_info small B. Msg_info small em{Backgroun D-image:url (/img/msg_bg.png);}
Msg_info h3 B,. msg_info h3 em,. Msg_info small B; msg_info small em{float:left;font-size:1px; width:6px; height:30 px;}
. msg_info H3 b{background-position:0px 0px;}
. msg_info H3 em{background-position:0px-32px;
. msg_info H3 span{background-position:0px-64px;float:left;line-height:30px;
. msg_info H3 span Font{float:left;text-align:left;overflow:hidden; margin-left:12px;}
. Msg_info H3 span i{float:right; margin-right:10px; cursor:pointer;font-style:normal;}
. message_content{Float:left;color: #515F62; overflow:hidden;border-left:solid 1px #C2C2C2 background-color: #F1F2F7 ; Margin-top: -1px; min-height:145px; Height:auto!important; height:145px;}
. message_content div{float:left margin:0px padding:10px 14px;height:100%;p osition:relative;
. message_content Div p.message_txt{float:left;width:100%;height:80%;margin:0px; padding:0px;min-height:60px;}
. message_content div i{float:left; font-style:normal; margin-top:2px;text-align:right;position:fixed;bottom:2px; right:4px;}
. message_content b.bright{float:right width:1px font-size:1px;background-color: #C2C2C2; border-right:solid 1px #82 8282;height:100%;}
. msg_info small{float:left; width:100%; height:5px; font-size:5px;}
. msg_info small span{background-position:0px-101px;height:5px; float:left;}
. msg_info small b{height:5px; background-position:0px-96px;}
. msg_info small em{height:5px; background-position:0px-106px; float:right;}
JS section:
A custom right lower corner pinball function
Copy Code code as follows:
Lower right corner projectile layer
function Messager () {
This.layer = {' width ': ' Height ': 100};
This.title = ' information hint ';
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;
Class
This.inits = function (title, text) {
_anims = This.anims;
_title = title;
var _html = ' <div class= ' msg_info ' + this.obj_id + ' > ';
_html + = ' _html + = ' <b></b> ';
_html = ' <span class= ' msg_bg_middle ' > ';
_html + + ' <font> ' + title + ' </font> ';
_html = ' <i class= ' message_close ' >x</i> ';
_html + = ' </span> ';
_html + = ' <em></em> ';
_html + = ' _html = ' <div class= ' message_content ' > ';
_html + = ' <div class= ' msg_txt ' > ' + text + ' </div> ';
_html = ' <b class= ' bright ' ></b> ';
_html + = ' </div> ';
_html = ' <small><b></b><span class= ' 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);
});
};
Show
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);
};
Set width height
This.lays = function (width, height) {
if (width!= 0 && width) this.layer.width = width;
if (height!= 0 && height) this.layer.height = height;
};
Rendering properties
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
}
}
};
Remove Layer Time
This.rmmessage = function (time) {
if (Time > 0) {
Timer1 = settimeout (function () {closemsg ();}, time);
if (this.istiming) {
Timing (time);
}
}
};
Timing
Timing = function (time) {
_time = time/1000;
_timer2 = setinterval (function () {
_obj.find ('. Msg_bg_middle '). Find (' font '). html (_title + ' [' + (--_time) + ' auto close after seconds] ');
}, 1000);
}
Close Layer
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);
}
}
Sample functions:
Copy Code code as follows:
var msg = ' <p class= ' message_txt > currently has ' + Json.total + ' pending approval for you. </p><i> ' + json.stadate + ' </i> ';
var msgdiv = new Messager ();
Msgdiv.istiming = true;
Msgdiv.lays (300, 180);
Msgdiv.show ("User Audit Reminder", MSG, 10000);