myAlert（魔改版）
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": "absolute",
20 "bottom":"0",
21 "width":"100%"
22 }).appendTo(this.map);
23 this.flag = true;
24 }
25 if (this.flag) {
26 var div_child = $("<div></div>");
27 var div_sz = $("<div></div>");
28 div_sz.text(str);
29 div_child.css({
30 "position": "relative",
31 "bottom":6,
32 "height": this.height,
33 "marginBottom": "10px",
34 }).appendTo(this.div_father);
35
36 div_sz.css({
37 "position": "absolute",
38 "right":"0",
39 "padding":"0 20px 0 20px",
40 "height": this.height,
41 "backgroundColor": this.backgroundColor,
42 "lineHeight": this.height + "px",
43 "textAlign": "center",
44 "marginBottom": "10px",
45 "color": "#ffffff",
46 "borderRadius": "5px",
47 "box-shadow":"0 0 12px #000"
48 }).appendTo(div_child );
49 }
50 }
51
52 MyAlert.prototype.render_left = function (str) {
53 if (!this.flag) {
54 this.div_father = $("<div></div>");
55 this.div_father.css({
56 "position": "absolute",
57 "bottom":"0",
58 "width":"100%"
59 }).appendTo(this.map);
60 this.flag = true;
61 }
62 if (this.flag) {
63 var div_child = $("<div></div>");
64 var div_sz = $("<div></div>");
65 div_sz.text(str);
66 div_child.css({
67 "position": "relative",
68 "bottom":6,
69 "height": this.height,
70 "marginBottom": "10px",
71 }).appendTo(this.div_father);
72
73 div_sz.css({
74 "position": "absolute",
75 "left":"3",
76 "padding":"0 20px 0 20px",
77 "height": this.height,
78 "backgroundColor": "#ffffff",
79 "lineHeight": this.height + "px",
80 "textAlign": "center",
81 "marginBottom": "10px",
82 "color": "#3c3c3c",
83 "borderRadius": "5px",
84 "box-shadow":"0 0 12px #000"
85 }).appendTo(div_child );
86 }
87 }
88 window.MyAlert = MyAlert;
89 }
90 )();
HTML
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <meta http-equiv="X-UA-Compatible" content="ie=edge">
7 <title>人工智障beta</title>
8 <script src="js/jquery-1.12.2.js"></script>
9 <script src="js/myAlert.js"></script>
10 <style>
11 *{
12 margin: 0;
13 padding: 0;
14 }
15 .box{
16 width: 100%;
17 max-width: 375px;
18 height: 100%;
19 min-height: 700px;
20 margin: 0 auto;
21 border-radius: 5px;
22 background: url(img/bg.jpg) no-repeat center center;
23 position: relative;
24 }
25 .send{
26 position: absolute;
27 bottom: 5px;
28 left: 0px;
29 width: 100%;
30 height: 35px;
31 }
32 .send input{
33 height: 100%;
34 border: 0;
35 }
36 .send-text{
37 width: 76%;
38 border-radius: 4px 0 0 4px;
39 margin-left: 7px;
40 }
41 .send-btn{
42 position: relative;
43 right: 7px;
44 top:1px;
45 width: 20%;
46 /* padding: 0 10px 0 10px; */
47 border-radius: 0 4px 4px 0;
48 }
49 .text-box{
50 position: relative;
51 overflow: hidden;
52 width: 100%;
53 height: 600px;
54
55 }
56
57 .scroll {
58 width: 18px;
59 height: 100%;
60 position: absolute;
61 top: 0;
62 right: 0;
63 background-color: #eee;
64 }
65
66 .bar {
67 height: 100px;
68 width: 100%;
69 position: absolute;
70 top: 0;
71 left: 0;
72 background-color: red;
73 border-radius: 10px;
74 cursor: pointer;
75 }
76 </style>
77 </head>
78 <body>
79 <div class="box">
80 <div class="text-box">
81 <!-- <div class="scroll" id="scroll">
82 <div class="bar" id="bar"></div>
83 </div> -->
84 </div>
85 <form class="send" action="">
86 <input class="send-text" type="text">
87 <input class="send-btn" type="submit" value="发送">
88 </form>
89 </div>
90 </body>
91 <script>
92 $(function(){
93 var myAlert = new MyAlert({
94 map: $(".text-box")
95 });
96
97 $(".text-box").on("mousedown",function(e){
98 var mouse_In_BoxY = e.pageY;
99 $(this).on("mousemove",function(e){
100 if($(this).height() < $(".text-box>div").height()){
101 var boxY = parseInt($(".text-box>div").css("bottom")) - (e.pageY - mouse_In_BoxY) ;
102 boxY = boxY >= 0?0:boxY;
103 boxY = boxY <= $(this).height()-$(".text-box>div").height()?$(this).height()-$(".text-box>div").height():boxY;
104 $(".text-box>div").css("bottom",boxY);
105 console.log(e.pageY);
106 }
107 })
108 }).on("mouseup",function(){
109 $(this).off("mousemove")
110 })
111
112 var num = 0;
113 $("input[type='submit']").on("click",function(){
114 $(".text-box>div").css("bottom",0);
115 var str = $("input[type='text']").val();
116 $("input[type='text']").val("");
117 myAlert.render_left(str);
118 num++;
119 var str = str.replace(/你/g,"我");
120 if(str == "我好"){
121 str = "你好";
122 }
123 if(str == ""){
124 str = "?";
125 }else{
126 str = str.replace(/[吗|？]/g,"!");
127 }
128 myAlert.render(str);
129 if(num >= 5){
130 myAlert.render("你想知道人类的本质吗？");
131 num = 0;
132 $("input[type='submit']").attr('disabled','disabled');
133 setInterval(function(){
134 myAlert.render("人类的本质就是复读机"+num++);
135 },3000);
136 }
137 return false;
138 })
139 })
140 </script>
141 </html>
