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.
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);
}
}
