8-7jQuery复习（qq微博的练习）
<!DOCTYPE html>
<html>
<head><meta charset="utf-8" /><title>腾讯微博</title><style type="text/css">body {margin: 0px;background: url('img/wrapBg.jpg') no-repeat #EBF1F1;}#logo {margin: 30px 0 0 300px;}#myBody {width: 800px;height: 200px;border: 1px solid #000;}#myBdLeft {width: 590px;height: 100%;background: #fff;float: left;}#talkBox {text-align: left;margin: 0 0 0 25px;}#msgTxt {width: 540px;height: 80px;overflow: hidden;font-family: Tahoma, Arial;font-size: 14px;border: 1px solid gray;}#talkBox h2 {text-align: left;padding: 0px;margin: 0px;font: normal normal normal 18px/29px 'MicroSoft YaHei', SimHei;}#funBox {width: 540px;}#funBox a {color: #000;text-decoration: none;font-size: 14px;}.creatNew,.atSome,.insertFace,.uploadPic,.uploadVideo {background-position: -170px -33px;display: inline-block;height: 16px;padding-left: 18px;}.countTxt {color: #999;float: right;line-height: 33px;margin: 0 15px 0 0;}.countTxt em {font-family: Georgia, Tahoma, Arial;font-size: 26px;position: relative;top: -5px;vertical-align: middle;}.sendBtn {float: right;margin: 0 20px 0 0;padding: 0px;background: url(img/bg1.png) -117px -165px no-repeat;line-height: 33px;margin-left: 14px;height: 30px;width: 112px;border: 0px;cursor: pointer;}#btnCloFri {cursor: pointer;}#myBdRight {background: #CCEBF4;width: 210px;height: 100%;float: right;}</style><style type="text/css">li {list-style: none;float: left;text-align: center;width: 100%;}ul {font-size: 20px;width: 100%;margin: 0px;padding: 0px;float: right;}.Table {width: 99px;border: 1px solid black;position: absolute;height: 103px;top: 226px;left: 654px;background-color:gray;}#no {float: right;text-align: right;width: 100%;}</style><script src="../Scripts/jquery-1.11.3.js"></script><script>$(function () {function text() {if (140 < $("#msgTxt").val().length) {$(".countTxt").html("已超过" + ($("#msgTxt").val().length - 140) + "字");$("em").css("color", "red");} else {$(".countTxt").html("还能输入" + (140 - $("#msgTxt").val().length) + "字");$("em").css("color", "#999");}}$("#msgTxt").bind("input propertychange",function () {text();});$(".Table").hide();$(".atSome").click(function () {$(".Table").toggle();});$("#no").click(function () {$(".Table").hide();});$("li").mouseover(function () {$(this).css("background-color", "yellow");}).mouseout(function () {$(this).css("background-color", "");}).click(function () {var str = $("#msgTxt").val();$("#msgTxt").val(str + $(this).text());text();});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': '囧' };$.each(userFaces, function (index, dom) {$(".ImgIco").append("![](faces/"</span> <span class="token operator">+</span> index <span class="token operator">+</span> <span class="token string">" "\"</span> <span class=\"token operator\">+</span> dom <span class=\"token operator\">+</span> <span class=\"token string\">\"")
");});$(".ImgIco").hide();$(".imgiccos").click(function () {var str = $("#msgTxt").val();$("#msgTxt").val(str + "[" + $(this).attr("title") + "]");text();});$(".insertFace").click(function () {$(".ImgIco").toggle();});$("#no2").click(function () {$(".ImgIco").hide();});});</script>
</head>
<body><img id="logo" src="img/b3_100901.png" alt="" /><center><div id="myBody"><div id="myBdLeft"><div id="talkBox"><h2><a>夏天来了，你懂得......</a></h2><textarea id="msgTxt"></textarea><div id="funBox"><a class="creatNew">话题</a><a class="atSome">朋友</a><a class="insertFace">表情</a><a class="uploadPic">照片</a><a class="uploadVideo">视频</a></div><div id="sendBox"><input type="button" class="sendBtn" value="" /><span class="countTxt">还能输入<em>140</em>字</span></div></div></div><div id="myBdRight"></div></div></center><div class="Table"><span id='no'>❌</span><ul><li>周杰伦</li><li>张杰</li><li>王力宏</li></ul></div><div class="ImgIco" style="width:300px;position:absolute;left:700px;top:240px;background-color:powderblue;border:1px solid black;"><span id='no2' style="text-align: right; width: 100%;float:right;">❌</span></div>
</body>
</html>
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！
