码迷,mamicode.com
首页 > Web开发 > 详细

JQuery: 微博演示

时间:2015-08-11 15:26:17      阅读:186      评论:0      收藏:0      [点我收藏+]

标签:

演示图:

技术分享

 

完成图:

技术分享

 

微博演示代码如下:

技术分享
  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     <style>
  7         .dvOut {border:1px solid black;
  8                 position:absolute;
  9                 left:86px;width:465px;
 10                 top:110px;height:156px;
 11         }
 12         .txtAra {border:1px black solid;
 13                 left:87px;width:427px;
 14                 top:112px;height:66px;
 15         }
 16         .aa {
 17         }
 18         .dvTopic,.dvFriend,.dvFace,.dvPhoto,.dvVideo {width:22px;
 19                   top:204px;height:15px;
 20         }
 21         .dvTopic {
 22             left:120px;
 23         }
 24         .dvFriend {
 25             left:161px;
 26         }
 27         .dvFace {
 28             left:204px;
 29         }
 30         .dvPhoto {
 31             left:244px;
 32         }
 33         .dvVideo {
 34             left:286px;
 35         }
 36         .dvShowCharNum {left:422px;top:220px;
 37            width:100px;height:18px;
 38         }
 39         .btnSend {left:444px;top:214px;
 40                   width:94px;height:27px;
 41                   background-color:#b6ff00;
 42         }
 43     </style>
 44     <script src="jquery-1.11.2.js"></script>
 45     <script type="text/javascript">
 46         //发送按钮高亮显示
 47         $(function () {
 48             $(.dvSend .btnSend).click(function () {
 49                 $(this).css(backgroundPosition, 0 -195px).css(backgroundColor, red);
 50             }).mouseout(function () {
 51                 $(this).css(backgroundPosition, -117px -165px).css(backgroundColor, #b6ff00);
 52             });
 53         });
 54     </script>
 55     <script type="text/javascript">
 56         //显示剩余多少字符
 57         $(function () {
 58             $(.dvTxt .txtAra).change(function () {
 59                 var len = 140 - $(this).val().length;
 60                 if (len >= 0) {
 61                     $(.sp1).html(还剩<em> + len + </em>个字符);
 62                 } else {
 63                     $(.dvShowCharNum .sp1).html(超出<font color="red"><em> + Math.abs(len) + </em></font>个字符);
 64                 }
 65             });
 66             var interId = setInterval(function () {
 67                 $(.dvTxt .txtAra).change();
 68             }, 1000)
 69         });
 70     </script>
 71     <script type="text/javascript">
 72         //显示话题
 73         $(function () {
 74             $(.dvTopic a).click(function () {
 75                 $(this).css({ backgroundPosition: 0 -195px, cursor: pointer });
 76             }).click(function () {
 77                 if ($(.dvTxt .txtAra).val().length <= 0) {
 78                     $(.dvTxt .txtAra).val(#显示话题标题#); //selectRange(1,7) 高亮显示
 79                 }
 80             }).mouseout(function () {
 81                 $(this).css(backgroundPosition, -117px -165px);
 82             });
 83         });
 84     </script>
 85     <script type="text/javascript">
 86         //显示朋友
 87         $(function () {
 88             $(.dvFriend a).click(function () {
 89                 if ($(#dvF).length > 0) {
 90                     $(#dvF).remove();
 91                 }
 92                 var dvFObj = $(<div id="dvF" style="width:100px;border:1px solid black;background-color:green;position:absolute;"></div>).appendTo($(body));
 93                 var dvX = $(this).offset().left + px;
 94                 var dvY = $(this).offset().top + $(this).height() + px;
 95                 dvFObj.css({ left: dvX, "top": dvY });
 96                 var spp1Obj = $(<span id="spp1" style="background-color:gray;cursor:pointer;float:right;">关闭</span>).click(function () {
 97                     $(this).parent().remove();
 98                 }).appendTo(#dvF);
 99                 var friends = [涂函, 鞠婧祎, 朴智妍, 朴妮麦, 陈淑君, 刘红霞, 易倾城, 唯我独尊];
100                 var uu1Obj = $(<ul id="uu1" style="list-style-type:none;clear:both;margin:0px;padding:0px;"></ul>).appendTo(dvFObj);
101                 for (var i = 0; i < friends.length; i++) {
102                     var li1Obj = $(<li style="cursor:pointer;font-color:yellow;">@ + friends[i] + </li>).click(function () {
103                         if ($(.dvTxt .txtAra).val() == #显示话题标题#) {
104                             $(.dvTxt .txtAra).val($(this).text());
105                         } else {
106                             $(.dvTxt .txtAra).val($(.dvTxt .txtAra).val() + $(this).text());
107                         }
108                     }).appendTo(uu1Obj)
109                 }
110             });
111         });
112     </script>
113     <script type="text/javascript">
114         //显示表情
115         $(function () {
116             var dict = {
117                 "00.gif": "00", "01.gif": "01", "02.gif": "02", "03.gif": "03", "04.gif": "04", "05.gif": "05", "06.gif": "06", "07.gif": "07", "08.gif": "08", "09.gif": "09",
118                 "10.gif": "10", "11.gif": "11", "12.gif": "12", "13.gif": "13", "14.gif": "14", "15.gif": "15", "16.gif": "16", "17.gif": "17", "18.gif": "18", "19.gif": "19",
119                 "20.gif": "20", "21.gif": "21", "22.gif": "22", "23.gif": "23", "24.gif": "24", "25.gif": "25", "26.gif": "26", "27.gif": "27", "28.gif": "28", "29.gif": "29",
120                 "30.gif": "30", "31.gif": "31", "32.gif": "32", "33.gif": "33", "34.gif": "34", "35.gif": "35", "36.gif": "36", "37.gif": "37", "38.gif": "38", "39.gif": "39",
121                 "40.gif": "40", "41.gif": "41", "42.gif": "42", "43.gif": "43", "44.gif": "44", "45.gif": "45", "46.gif": "46"
122             };
123             $(.dvFace a).click(function () {
124                 if ($(#dvFaceImg).length > 0) {
125                     $(#dvFaceImg).remove();
126                 }
127                 var dvFaceImg = $(<div id="dvFaceImg" style="width:300px;position:absolute;background-color:#B56;border:1px solid blue;"></div>).appendTo(body);
128                 var dvXX = $(this).offset().left + px;
129                 var dvYY = $(this).offset().top + $(this).height() + px;
130                 dvFaceImg.css({"left":dvXX,"top":dvYY});
131                 $(<span id="spShowFace" style="float:left">表情<span>).appendTo(dvFaceImg);
132                 $(<span id="spCloseFace" style="float:right;background-color:gray;cursor:pointer;">关闭</span>).click(function () {
133                     $(this).parent().remove();
134                 }).appendTo(dvFaceImg);
135                 var dvFaceImage = $(<div id="dvFaceImage" style="clear:both;"></div>).appendTo(dvFaceImg);
136                 for (var key in dict) {
137                     $(<img src="/face/ + key + " title=" + dict[key] + " style="cursor:pointer;"></img>).click(function () {
138                         if ($(.dvTxt .txtAra).val() == "#显示话题标题#") {
139                             $(.dvTxt .txtAra).val([ + $(this).attr(title) + ]);
140                         } else {
141                             $(.dvTxt .txtAra).val($(.dvTxt .txtAra).val() + [ + $(this).attr(title) + ]);
142                         }
143                     }).appendTo(dvFaceImage);
144                 }
145             });
146         });
147     </script>
148 </head>
149 <body style="background-color:#0094ff">
150     <div>
151         <div class="dvOut">
152             <div>
153                 <label><strong>夏天来了,你懂得......</strong></label>
154             </div>
155             <div class="dvTxt">
156                 <textarea class="txtAra"></textarea>
157             </div>
158             <span class="dvTopic">
159                 <a class="aa" href="javascript:void(0)">话题</a>
160             </span>
161             <span class="dvFriend">
162                 <a class="aa" href="javascript:void(0)">朋友</a>
163             </span>
164             <span class="dvFace">
165                 <a class="aa" href="javascript:void(0)">表情</a>
166             </span>
167             <span class="dvPhoto">
168                 <a class="aa" href="javascript:void(0)">照片</a>
169             </span>
170             <span class="dvVideo">
171                 <a class="aa" href="javascript:void(0)">视频</a>
172             </span>
173             <div class="dvShowCharNum">
174                 <span class="sp1"></span>
175             </div>
176             <div class="dvSend">
177                 <input class="btnSend" type="button" value="广播" />
178             </div>
179         </div>
180     </div>
181 </body>
182 </html>
JQuery: 微博演示

 

JQuery: 微博演示

标签:

原文地址:http://www.cnblogs.com/adolphyang/p/4720818.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!