仿优书网的信息提示

 1 (function () {
 2     var that = this;
 3     function MyAlert(obj) {
 4         obj = obj || {};
 5         this.flag = false;
 6         this.width = obj.width || 300;
 7         this.height = obj.height || 50;
 8         this.backgroundColor = obj.backgroundColor || "#bd362f";
 9         this.remove_time = obj.remove_time || 3000;
10         this.map = obj.map || $("body");
11         this.div_father = null;
12         that = this;
13     }
14 
15     MyAlert.prototype.render = function (str) {
16         if (!this.flag) {
17             this.div_father = $("<div></div>");
18             this.div_father.css({
19                 "position": "fixed",
20                 "zIndex":999,
21                 "top": 20,
22                 "right": 20,
23             }).appendTo(this.map);
24             this.flag = true;
25         }
26         if (this.flag) {
27             var div_child = $("<div></div>"); 
28             div_child.text(str);
29             div_child.css({
30                 "width": this.width,
31                 "height": this.height,
32                 "backgroundColor": this.backgroundColor,
33                 "lineHeight": this.height + "px",
34                 "textAlign": "center",
35                 "marginBottom": "10px",
36                 "color": "#ffffff",
37                 "borderRadius": "5px",
38                 "box-shadow":"0 0 12px #000",
39                 // font-size: 14px;
40                 "font-size":"15px"
41             }).prependTo(this.div_father);
42 
43             setTimeout(function () {
44                 div_child.fadeOut(1000, function () {
45                     // // that.div_child.pop();
46                     div_child.remove();
47                  
48                     if (that.div_father.find("div").length === 0) {
49                        that.div_father.remove();
50                        that.div_father = null;
51                        that.flag = false;
52                     }
53                 })
54             }, this.remove_time);
55         }
56     }
57 
58     window.MyAlert = MyAlert;
59 }
60 )();
 var myalert = new MyAlert();
　myalert.render("密码错误")；

 

不过优书网的提示鼠标放在上面就会清除定时器。还没想好定时器如何与dom绑定。自定义属性记录吗？

( function () {

var that = this;

function MyAlert( obj) {

obj = obj || {};

this. flag = false;

this. width = obj. width || 300;

this. height = obj. height || 50;

this. backgroundColor = obj. backgroundColor || "#bd362f";

this. remove_time = obj. remove_time || 3000;

this. map = obj. map || $( "body");

this. div_father = null;

that = this;

}

MyAlert. prototype. render = function ( str) {

if (! this. flag) {

this. div_father = $( "<div></div>");

this. div_father. css({

"position" : "fixed",

"zIndex" : 999,

"top" : 20,

"right" : 20,

}). appendTo( this. map);

this. flag = true;

}

if ( this. flag) {

var div_child = $( "<div></div>");

div_child. text( str);

div_child. css({

"width" : this. width,

"height" : this. height,

"backgroundColor" : this. backgroundColor,

"lineHeight" : this. height + "px",

"textAlign" : "center",

"marginBottom" : "10px",

"color" : "#ffffff",

"borderRadius" : "5px",

"box-shadow" : "0 0 12px #000",

// font-size: 14px;

"font-size" : "15px"

}). prependTo( this. div_father);

setTimeout( function () {

div_child. fadeOut( 1000, function () {

// // that.div_child.pop();

div_child. remove();

 

if ( that. div_father. find( "div"). length === 0) {

that. div_father. remove();

that. div_father = null;

that. flag = false;

}

})

}, this. remove_time);

}

}

window. MyAlert = MyAlert;

}

)();

转载于:https://www.cnblogs.com/csdcs/p/10149392.html