腾讯微博项目
Posted 影落明湖
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了腾讯微博项目相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <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> <script src="jquery-1.8.3.js" type="text/javascript"></script> <script type="text/javascript"> //1。扩展jQuery $.fn.selectRange = function (start, end) { var curObj = $(this).get(0); if (!curObj) return; else if (curObj.setSelectionRange) { curObj.focus(); curObj.setSelectionRange(start, end); } /* WebKit */ else if (curObj.createTextRange) { var range = curObj.createTextRange(); range.collapse(true); range.moveEnd(‘character‘, end); range.moveStart(‘character‘, start); range.select(); } /* IE */ else if (curObj.selectionStart) { curObj.selectionStart = start; curObj.selectionEnd = end; } }; //页面加载后执行 $(function () { //高亮显示,注册一个鼠标进入的事件 $(‘#sendBox .sendBtn‘).mouseover(function () { $(this).css(‘backgroundPosition‘, ‘0 -195px‘); //鼠标离开的事件 }).mouseout(function () { $(this).css(‘backgroundPosition‘, ‘-117px -165px‘); }); //输入内容 $(‘#funBox .creatNew‘).click(function () { if ($(‘#msgTxt‘).val().length == 0) { $(‘#msgTxt‘).val(‘#输入话题标题#‘).selectRange(1, 7); } }); //计算字数 setInterval(function () { //调用文本框的change事件 $(‘#msgTxt‘).change(); }, 200); $(‘#msgTxt‘).change(function () { var len = 140 - $(this).val().length; //还有多少个 if (len > 0) { $(‘#sendBox .countTxt‘).html(‘还能输入<em>‘ + len + ‘</em>个字‘); } else { $(‘#sendBox .countTxt‘).html(‘已经超出了<em><font color="red">‘ + Math.abs(len) + ‘</font></em>个字‘); } }); //加载朋友 $(‘#funBox .atSome‘).click(function () { var friendsList = [‘凤姐‘, ‘黑山‘, ‘gay‘, ‘郭德纲‘, ‘老杨‘, ‘老苏‘, ‘老蒋‘, ‘老牛‘, ‘老王‘, ‘老虎‘, ‘老马‘]; //创建一个层,设置样式 if ($(‘#dvFriend‘).length == 0) { var dvObj = $(‘<div id="dvFriend" style="width:100px;border:1px solid blue; background-color:white;position:absolute;"></div>‘).appendTo($(‘body‘)); dvObj.css(‘left‘, $(this).offset().left + ‘px‘); dvObj.css(‘top‘, $(this).offset().top + $(this).height() + ‘px‘); //层可以关闭的 $(‘<span style="background-color:gray;cursor:pointer;float:right;">关闭</span>‘).click(function () { $(this).parent().remove(); //关闭层 }).appendTo(dvObj); //创建ul标签 var ulObj = $(‘<ul style="clear:both;list-style-type:none; margin:0;padding:0;"></ul>‘).appendTo(dvObj); //把ul标签添加到层中 for (var key in friendsList) {//遍历朋友的数组,创建li标签 $(‘<li style="margin-bottom:5px;cursor:pointer;">@‘ + friendsList[key] + ‘</li>‘).appendTo(ulObj).mouseover(function () {//为li标签添加鼠标进入的事件 $(this).css(‘backgroundColor‘, ‘yellow‘); //设置背景颜色 }).mouseout(function () {//为li标签添加鼠标离开的事件 $(this).css(‘backgroundColor‘, ‘‘); //背景颜色设置为默认 }).click(function () {//为li标签添加点击事件 //设置文本域中的内容 if ($(‘#msgTxt‘).val() == ‘#输入话题标题#‘) { $(‘#msgTxt‘).val($(this).text()); } else { $(‘#msgTxt‘).val($(‘#msgTxt‘).val() + $(this).text()); } // end else }); } // end for } // end if //显示朋友的标签 ul p 设置样式, 朋友有高亮显示 ，还可以点击 ，朋友的名字 添加到文本域 }); //end click //加载表情 $(‘#funBox .insertFace‘).click(function () { 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‘: ‘囧‘ }; //创建层 if ($(‘#dvf‘).length == 0) { var dvFace = $(‘<div id="dvf" style="width:370px;border:1px solid blue;background-color:white;position:absolute;"></div>‘).appendTo($(‘body‘)); dvFace.css(‘left‘, $(this).offset().left - 100 + ‘px‘); dvFace.css(‘top‘, $(this).offset().top + $(this).height() + ‘px‘); //显示"表情"和关闭 $(‘<span style="float:left">表情</span>‘).appendTo(dvFace); $(‘<span style="float:right;background-color:gray;cursor:pointer;">关闭</span>‘).click(function () { $(this).parent().remove(); //移除这个层 }).appendTo(dvFace); //显示图片 //创建一个层 用来添加表情 var dvImage = $(‘<div style="clear:both;"></div>‘).appendTo(dvFace); for (var key in userFaces) { //创建表情图片添加到层中 $(‘<img src="faces/‘ + key + ‘" title="‘ + userFaces[key] + ‘" />‘).mouseover(function () { $(this).css(‘cursor‘, ‘pointer‘); }).click(function () { if ($(‘#msgTxt‘).val() == ‘#输入话题标题#‘) { $(‘#msgTxt‘).val(‘[‘ + $(this).attr(‘title‘) + ‘]‘); } else { $(‘#msgTxt‘).val($(‘#msgTxt‘).val() + ‘[‘ + $(this).attr(‘title‘) + ‘]‘); } }).appendTo(dvImage); } } //end if }); }); </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 href="javascript:void(0);" class="creatNew">话题</a> <a href="javascript:void(0);" class="atSome">朋友</a> <a href="javascript:void(0);" class="insertFace">表情</a> <a href="javascript:void(0);" class="uploadPic">照片</a> <a href="javascript:void(0);" 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> </body> </html>
以上是关于腾讯微博项目的主要内容，如果未能解决你的问题，请参考以下文章