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>