腾讯微博 - 爱码网

  1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2 <html xmlns="http://www.w3.org/1999/xhtml">
  3 
  4 <head>
  5     <title>我的腾讯微博</title>
  6     <style type="text/css">
  7         *{
  8             margin: 0;
  9             padding: 0;
 10         }
 11             #myBody{
 12                 height: 200px;
 13                 width: 800px;
 14                 border:1px solid #000;
 15                 margin: 0 auto;
 16             }
 17         a{
 18             text-decoration: none;
 19             color:#000;
 20         }
 21         body{
 22             background: url("imgs/wrapBg.jpg") no-repeat #EBF1F1;
 23             background-size: cover;
 24         }
 25         #logo {
 26             margin: 30px 0 0 300px;
 27         }
 28         #myBdLeft{
 29             width: 590px;
 30             height: 100%;
 31             background: #fff;
 32             float: left;
 33         }
 34       #msgTxt {
 35           width: 540px;
 36           height: 80px;
 37           font-family: Tahoma, Arial;
 38           font-size: 14px;
 39           border: 1px solid gray;
 40       }
 41         #talkBox{
 42             text-align: left;
 43             margin: 0 0 0 25px;
 44         }
 45         #talkBox h2{
 46             text-align: left;
 47             padding: 0;
 48             margin: 0;
 49             color:#000;
 50             font: normal normal normal 18px/29px \'MicroSoft YaHei\', SimHei;
 51         }
 52         #funBox{
 53             width: 540px;
 54         }
 55         #funBox a{
 56             color:#000;
 57             text-decoration: none;
 58             font-size: 14px;
 59         }
 60         .creatNew,
 61         .atSome,
 62         .insertFace,
 63         .uploadPic,
 64         .uploadVideo{
 65             background-position: -170px -33px;
 66             display: inline-block;
 67             height: 16px;
 68             margin: 0 15px 0 0;
 69         }
 70         .countTxt{
 71             color:#999;
 72             float: right;
 73             line-height: 33px;
 74             margin: 0 15px 0 0;
 75         }
 76         .countTxt em{
 77             font-family: Georgia, Tahoma, Arial;
 78             font-size: 26px;
 79             /*position: relative;*/
 80             /*top: -5px;*/
 81             /*vertical-align: middle;*/
 82         }
 83         .sendBtn{
 84             float: right;
 85             margin: 0 20px 0 0;
 86             padding: 0px;
 87             background: url(imgs/bg1.png) -117px -165px no-repeat;
 88             line-height: 33px;
 89             margin-left: 14px;
 90             height: 30px;
 91             width: 112px;
 92             border: 0px;
 93             cursor: pointer;
 94         }
 95         .sendBtn:hover{
 96             background: url(imgs/bg1.png) 0px -195px no-repeat;
 97         }
 98         #myBdRight {
 99             background: #CCEBF4;
100             width: 210px;
101             height: 100%;
102             float: right;
103         }
104         .showFaces{
105             position: absolute;
106             background: #f0f0f0;
107             border:1px solid #a0a0a0;
108             width: 200px;
109         }
110     </style>
111     <!-- <script src="jquery-1.11.3.js" type="text/javascript"></script> -->
112     <script src="jquery-1.8.2.min.js"></script>
113 </head>
114 <body>
115 <img src="imgs/b3_100901.png" alt="" id="logo">
116 <section>
117     <div id="myBody">
118         <div id="myBdLeft">
119             <div id="talkBox">
120                 <h2>
121                     <a href="">春天来了，你懂的...</a>
122                 </h2>
123                 <textarea name="" id="msgTxt"></textarea>
124                 <div id="funBox">
125                     <a href="javascript:void(0);" class="creatNew">话题</a>
126                     <a href="javascript:void(0);" class="atSome">朋友</a>
127                     <a href="javascript:void(0);" class="insertFace">表情</a>
128                     <a href="javascript:void(0);" class="uploadPic">照片</a>
129                     <a href="javascript:void(0);" class="uploadVideo">视频</a>
130                 </div>
131                 <div id="sendBox">
132                     <input type="button" value="" class="sendBtn">
133                     <span class="countTxt">还能输入<em>140</em>字</span>
134                 </div>
135             </div>
136         </div>
137         <div id="myBdRight"></div>
138     </div>
139 </section>
140 </body>
141 </html>
142 <script>
143     var friendsList = [\'中国\', \'日本\', \'韩国\', \'朝鲜\',\'蒙古\'];
144 
145     var userFaces = { \'0.gif\': \'微笑\', \'1.gif\': \'撇嘴\', \'2.gif\': \'色\', \'3.gif\': \'发呆\', \'4.gif\': \'得意\', \'5.gif\': \'流泪\', \'6.gif\': \'害羞\', \'7.gif\': \'闭嘴\', \'8.gif\': \'睡\', \'9.gif\': \'大哭\', \'10.gif\': \'尴尬\', \'11.gif\': \'发怒\', \'12.gif\': \'调皮\', \'13.gif\': \'呲牙\', \'14.gif\': \'惊讶\', \'15.gif\': \'难过\', \'16.gif\': \'酷\', \'17.gif\': \'冷汗\', \'18.gif\': \'抓狂\', \'19.gif\': \'吐\', \'20.gif\': \'偷笑\', \'21.gif\': \'可爱\', \'22.gif\': \'白眼\', \'23.gif\': \'傲慢\', \'24.gif\': \'饥饿\', \'25.gif\': \'困\', \'26.gif\': \'惊恐\', \'27.gif\': \'流汗\', \'28.gif\': \'憨笑\', \'29.gif\': \'大兵\', \'30.gif\': \'奋斗\', \'31.gif\': \'咒骂\', \'32.gif\': \'疑问\', \'33.gif\': \'嘘\', \'34.gif\': \'晕\', \'35.gif\': \'折磨\', \'36.gif\': \'衰\', \'37.gif\': \'骷髅\', \'38.gif\': \'敲打\', \'39.gif\': \'再见\', \'40.gif\': \'擦汗\', \'41.gif\': \'抠鼻\', \'42.gif\': \'鼓掌\', \'43.gif\': \'糗大了\', \'44.gif\': \'坏笑\', \'45.gif\': \'左哼哼\', \'46.gif\': \'右哼哼\', \'47.gif\': \'哈欠\', \'48.gif\': \'鄙视\', \'49.gif\': \'委屈\', \'50.gif\': \'快哭了\', \'51.gif\': \'阴险\', \'52.gif\': \'亲亲\', \'53.gif\': \'吓\', \'54.gif\': \'可怜\', \'55.gif\': \'菜刀\', \'56.gif\': \'西瓜\', \'57.gif\': \'啤酒\', \'58.gif\': \'篮球 \', \'59.gif\': \'乒乓\', \'60.gif\': \'咖啡\', \'61.gif\': \'饭\', \'62.gif\': \'猪头\', \'63.gif\': \'玫瑰\', \'64.gif\': \'凋谢\', \'65.gif\': \'示爱\', \'66.gif\': \'爱心\', \'67.gif\': \'心碎\', \'68.gif\': \'蛋糕\', \'69.gif\': \'闪电\', \'70.gif\': \'炸弹\', \'71.gif\': \'刀\', \'72.gif\': \'足球\', \'73.gif\': \'瓢虫\', \'74.gif\': \'便便\', \'75.gif\': \'月亮\', \'76.gif\': \'太阳\', \'77.gif\': \'礼物\', \'78.gif\': \'拥抱\', \'79.gif\': \'强\', \'80.gif\': \'弱\', \'81.gif\': \'握手\', \'82.gif\': \'胜利\', \'83.gif\': \'抱拳\', \'84.gif\': \'勾引\', \'85.gif\': \'拳头\', \'86.gif\': \'差劲\', \'87.gif\': \'爱你\', \'88.gif\': \'NO\', \'89.gif\': \'OK\', \'90.gif\': \'爱情\', \'91.gif\': \'飞吻\', \'92.gif\': \'跳跳\', \'93.gif\': \'发抖\', \'94.gif\': \'怄火\', \'95.gif\': \'转圈\', \'96.gif\': \'磕头\', \'97.gif\': \'回头\', \'98.gif\': \'跳绳\', \'99.gif\': \'挥手\', \'100.gif\': \'激动\', \'101.gif\': \'街舞\', \'102.gif\': \'献吻\', \'103.gif\': \'左太极\', \'104.gif\': \'右太极\', \'105.gif\': \'淡定\', \'106.gif\': \'晕\', \'107.gif\': \'不满\', \'108.gif\': \'睡觉\', \'109.gif\': \'小调皮\', \'110.gif\': \'咒骂\', \'111.gif\': \'发怒\', \'112.gif\': \'偷笑\', \'113.gif\': \'微笑\', \'114.gif\': \'震惊\', \'115.gif\': \'囧\' };
146 
147     $(function(){
148 
149     });
150 
151     window.onload = function() {
152         //初始化atsome
153         initAtSome();
154 
155         //初始化图片
156         initFaces();
157     };
158 
159     function initFaces(){
160         var str  = "<div class=\'showFace\'>";
161         for( var key in userFaces) {
162             str += "<img alt=\'"+ userFaces[key] +"\' src=\'faces/"+key+"\'>"
163         }
164         str += "</div>";
165 
166         var $faceDiv = $(str);
167 
168         $faceDiv.appendTo( ".insertFace" ).hide().css({
169             left: $( ".insertFace" ).offset.left + "px",
170             top: $(".insertFace").offset.top + 16 + "px",
171         }).find( "img" ).click(function() {
172             setText( "[" + $(this).attr("alt") + "]" );
173         });
174 
175         $(".insertFace").hover(function() {
176             $faceDiv.show();
177         },function() {
178             $faceDiv.hide();
179 
180         });
181     }
182 
183 
184     function initAtSome() {
185         var h = $(".atSome").height();
186         var str = "";
187         str += "<ul class=\'atSomeList\'>";
188         for( var i = 0; i < friendsList.length; i++ ) {
189             str += "<li>";
190             str +=         "<a herf=\'javascript:\'>@"+friendsList[i]+"</a>";
191             str += "</li>"
192         }
193         str += "</ul>";
194 
195         var $atSomeList = $(str);
196         $(".atSome").append($atSomeList).hover(function(){
197             $atSomeList.show();
198         },function(){
199             $atSomeList.hide();
200         });
201         $atSomeList.css({
202             top: ($(".atSome").offset().top + h - 15) +"px",
203             left: ($(".atSome").offset().left + 14) + "px"
204         }).hide().find("a").click(function(){
205             setText($(this).text());
206         });
207     }
208 
209     function setText(str) {
210         $("#msgTxt").text($("#msgTxt").text() + str);
211 
212     }
213 </script>