Js仿腾讯微博效果

  1 <!DOCTYPE html>
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
  5     <title></title>
  6     <link href="css/demo1.css" rel="stylesheet" />
  7     <script src="js/jquery-1.10.2.min.js"></script>
  8     <script src="js/demo1.js"></script>
  9 </head>
 10 <body>
 11     <div id="msgBox">
 12         <form>
 13             <h2>来，说说你在做什么，想什么</h2>
 14             <div>
 15                 <input id="userName" class="f-text" value=""/>
 16                 <p id="face">
 17                     <img src="img/face1.gif" class="current"/>
 18                     <img src="img/face2.gif" />
 19                     <img src="img/face3.gif"/>
 20                     <img src="img/face4.gif"/>
 21                     <img src="img/face5.gif"/>
 22                     <img src="img/face6.gif"/>
 23                     <img src="img/face7.gif"/>
 24                 </p>
 25             </div>
 26             <div><textarea id="conBox" class="f-text"></textarea></div>
 27             <div class="tr">
 28                 <p>
 29                     <span class="countTxt">还能输入</span><strong class="maxNum">140</strong><span>个字</span>
 30                     <input  type="button" id="sendBtn" value="" title="快捷键 Ctrl+Enter"/>
 31                 </p>
 32             </div>
 33         </form>
 34         <div class="list">
 35             <h3><span>大家在说</span></h3>
 36             <ul>
 37                 <!--<li>
 38                     <div class="userPic"><img src="img/face.gif"/></div>
 39                     <div class="content">
 40                         <div class="userName"><a href="javascript:;">永不上线</a>：</div>
 41                         <div class="msgInfo">新增删除广播功能。</div>
 42                         <div class="times"><span>07月05日 15:14</span><a class="del" href="javascript:;">删除</a></div>
 43                     </div>
 44                 </li>-->
 45             </ul>
 46         </div>
 47     </div>
 48 </body>
 49 </html>
 50 
 51 
 52 
 53 
 54 body,div,h2,h3,ul,li,p{
 55     margin:0px;
 56     padding:0px;
 57 }
 58 a{
 59     text-decoration:none;
 60 }
 61 a:hover{
 62     text-decoration:underline;
 63 }
 64 ul{
 65     list-style-type:none;
 66 }
 67 body{
 68     color:#333;
 69     background:#a7ab8c;
 70     font:12px/1.5 5b8b4f53;/*文字大小为12px，行高为1.5倍，5b8b4f53是宋体的意思，也可以直接写成“宋体”*/
 71 }
 72 #msgBox{
 73     500px;
 74     background:#fff;
 75     border-radius:5px;
 76     margin:10px auto;
 77     padding-top:10px;
 78 }
 79 #msgBox form h2{
 80     font-weight:400;
 81     font:400 18px/1.5  5fae8f6f96c59ed1;
 82 }
 83 #msgBox form{
 84     background:url(../img/boxBG.jpg) repeat-x 0 bottom;/*背景图片 沿水平方向重复 水平位置0  垂直位置底部*/
 85     padding:0 20px 15px;/*上0，左右20，下15*/
 86 }
 87 #userName,#conBox{
 88     color:#777;
 89     border:1px solid #d0d0d0;
 90     border-radius:6px;
 91     background:#fff url(../img/inputBG.png) repeat-x;
 92     padding:3px 5px;
 93     font:14px/1.5 arial;
 94 }
 95 #userName {
 96     height: 20px;
 97     150px;
 98 }
 99 
100 #conBox {
101      448px;
102     resize: none;/*无法调整元素属性*/
103     height: 65px;
104     overflow: auto;/*滚动条*/
105 }
106 
107 #msgBox form div {
108     position: relative;
109     color: #999;
110     margin-top: 10px;
111 }
112 
113 #msgBox img {
114     border-radius: 3px;
115 }
116 
117 #face {
118     position: absolute;
119     top: 0;
120     left: 172px;
121     300px;
122 }
123 
124     #face img {
125          30px;
126         height: 30px;
127         cursor: pointer;
128         margin-right: 6px;
129         opacity: 0.5;
130         filter: alpha(opacity=50);/*浏览器兼容*/
131     }
132 
133         #face img.hover, #face img.current {
134              28px;
135             height: 28px;
136             border: 1px solid #f60;
137             opacity: 1;
138             filter: alpha(opacity=100);
139         }
140 
141 #sendBtn {
142     border: 0;
143      112px;
144     height: 30px;
145     cursor: pointer;
146     margin-left: 10px;
147     background: url(../img/btn.png) no-repeat;
148 }
149 
150     #sendBtn.hover {
151         background-position: 0 -30px;
152     }
153 
154 #msgBox form .maxNum {
155     font: 26px/30px Georgia, Tahoma, Arial;
156     padding: 0 5px;
157 }
158 
159 #msgBox .list {
160     padding: 10px;
161 }
162 
163     #msgBox .list h3 {
164         position: relative;
165         height: 33px;
166         font-size: 14px;
167         font-weight: 400;
168         background: #e3eaec;
169         border: 1px solid #dee4e7;
170     }
171 
172         #msgBox .list h3 span {
173             position: absolute;
174             left: 6px;
175             top: 6px;
176             background: #fff;
177             line-height: 28px;
178             display: inline-block;
179             padding: 0 15px;
180         }
181 
182     #msgBox .list ul {
183         overflow: hidden;
184         zoom: 1;
185     }
186 
187         #msgBox .list ul li {
188             float: left;
189             clear: both;
190              100%;
191             border-bottom: 1px dashed #d8d8d8;
192             padding: 10px 0;
193             background: #fff;
194             overflow: hidden;
195         }
196 
197             #msgBox .list ul li.hover {
198                 background: #f5f5f5;
199             }
200 
201     #msgBox .list .userPic {
202         float: left;
203          50px;
204         height: 50px;
205         display: inline;
206         margin-left: 10px;
207         border: 1px solid #ccc;
208         border-radius: 3px;
209     }
210 
211     #msgBox .list .content {
212         float: left;
213          400px;
214         font-size: 14px;
215         margin-left: 10px;
216         font-family: arial;
217         word-wrap: break-word;
218     }
219 
220     #msgBox .list .userName {
221         display: inline;
222         padding-right: 5px;
223     }
224 
225         #msgBox .list .userName a {
226             color: #2b4a78;
227         }
228 
229     #msgBox .list .msgInfo {
230         display: inline;
231         word-wrap: break-word;
232     }
233 
234     #msgBox .list .times {
235         color: #889db6;
236         font: 12px/18px arial;
237         margin-top: 5px;
238         overflow: hidden;
239         zoom: 1;
240     }
241 
242         #msgBox .list .times span {
243             float: left;
244         }
245 
246         #msgBox .list .times a {
247             float: right;
248             color: #889db6;
249             display: none;
250         }
251 
252 .tr {
253     overflow: hidden;
254     zoom: 1;
255 }
256 
257     .tr p {
258         float: right;
259         line-height: 30px;
260     }
261 
262     .tr * {
263         float: left;
264     }
265 
266 #face img:hover {
267     opacity: 1;
268 }
269 
270 .efont {
271     color: red;
272 }
273 
274 
275 
276 
277 
278 
279 /// <reference path="_references.js" />
280 
281 var src = "img/face1.gif";
282 $(function () {
283     $("#sendBtn").click(function () {//当点击按钮之后
284         var username = $.trim($("#userName").val());//获取到输入的用户名
285         var con = $.trim($("#conBox").val());//获取到输入的内容
286         if (username == "") {
287             alert("请填写您的姓名");
288             return;
289         }
290         if ($("#conBox").val().length > 140) {
291             alert("输入内容超过了140个长度");
292             return;
293         }
294         if (con == "") {
295             alert("随便说点什么吧");
296             return;
297         }
298         var date = new Date();
299         var sDate = date.getMonth() + 1 + "月" + date.getDate() + "日" + date.getHours() + ":" + date.getMinutes();
300         var c = "<li><div class="userPic"><img src="" + src + ""></div>
301                                 <div class="content">
302                                  <div class="userName"><a href="javascript:;">" + username + "</a>:</div>
303                                 <div class="msgInfo">" + con.replace(/<[^>]*>|&nbsp;/ig, "") + "</div>
304                                 <div class="times"><span>" + sDate + "</span><a class="del" href="javascript:;">删除</a></div>
305                              </div></li>";
306         $(".list ul").prepend($(c).hide().fadeIn(1000).bind("mouseover", function () {
307             $(this).find(".del").show().one("click", function () {
308                 $(this).parent().parent().parent().remove();
309             });
310             $(this).addClass("hover");
311         }).bind("mouseout", function () { $(this).find(".del").hide(); $(this).removeClass("hover"); }));
312     });
313 
314 
315     $("#face img").click(function () {
316         src = $(this).attr("src");
317         $(this).css("opacity", 1);
318     });
319 
320     $("#conBox").keyup(function () {//当在文本框里面输入内容的时候触发事件
321         var length = $("#conBox").val().length;//获取到输入内容的长度
322         var len = 140 - length;
323         if (len < 0) {
324             $(".countTxt").text("已超出");
325             len = Math.abs(len);
326             $(".maxNum").text(len).addClass("efont");
327         }
328         else {
329             $(".countTxt").text("还能输入");
330             $(".maxNum").text(len).removeClass("efont");
331         }
332     });
333 });
View Code