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>