zoukankan      html  css  js  c++  java

  • 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
  • 相关阅读:
    tar命令，vi编辑器
    Linux命令、权限
    Color Transfer between Images code实现
    利用Eclipse使用Java OpenCV（Using OpenCV Java with Eclipse）
    Matrix Factorization SVD 矩阵分解
    ZOJ Problem Set
    Machine Learning
    ZOJ Problem Set
    ZOJ Problem Set
    ZOJ Problem Set
  • 原文地址：https://www.cnblogs.com/snow52132/p/7277577.html
Copyright © 2011-2022 走看看