如果想看到更加系统的文章和学习方法经验可以关注的微信号：‘学习web前端’或者‘webVSwen’关注后回复‘学习’可以领取一套完整的学习视频...
我悄悄告诉你：怎样用jquery制作腾讯QQ空间说说发表效果
经常发说说的朋友对这效果很熟悉吧，对的，就是空间说说发表，每天发说说是这样发，但是怎么做到的呢，今天分享的就是这个，用jquery来制作这个效果，下面来看代码。
&!doctype html&
&html lang="en"&
&head&&!--头部--&
&!--声明当前页面的编码格式 国际编码 UTF-8 中文编码 GBK--&
&meta charset="UTF-8"&
&!--声明当前页面的三要素--&
&meta name="Keywords" content=""&
&meta name="Description" content=""&
&title&QQ空间说说发表-IT潇潇&/title&
&!--样式css 修饰 衣服 化妆品--&
&styletype="text/css"&
*{margin:0/*外边距*/padding:0/*内边距*/}
ul,li{list-style:}
body{background:url("images/bg_04.jpg");
background-size:}
#message{width:600/*宽度*/
height:170/*高度 px像素 pt em vh*/
background:#
margin:200pxauto 0;/*上 左右 下*/
border-radius:5/*css3 圆角*/}
#message p{font-size:12/*字体大小*/
font-family:"微软雅黑";/*字体类型*/
color:#666;
/*border:1px solid #000;/*边框 宽度 风格 颜色*/
line-height:40
text-indent:20/*首行缩进*/}
#message .edit{width:560
border:1pxsolid #
#message .but{width:560height:40/*border:1px solid #000;*/margin:15pxauto 0;position:/*参照物*/}
#message .but .msg_but{width:80height:30background:#7db718;display:inline-/*行间块级 block块级 none隐藏 inline行间*/font-size:12color:#font-family:"微软雅黑";text-align:/*对齐方式*/line-height:30border-radius:3float:}
#message .but .imgface{cursor:/*指针形状*/}
#message .but .msg_but{cursor:/*指针形状*/}
#message .but .face{width:395height:160background:#border:1pxsolid #position:top:20left:20padding:10display:}
#message .but .face ul li{width:22height:22float:margin:2}
.msgBox{width:600margin:15}
.msgBox .msgInfo{width:580background:#padding:10margin-bottom:10}
.msgBox .msgInfo dl{width:100%;height:60border-bottom:1pxsolid #}
.msgBox .msgInfo dl dt{width:50height:50float:}
.msgBox .msgInfo dl dd{width:500height:50line-height:50font-family:"微软雅黑";
font-size:14float:}
.msgBox .msgInfo .con{font-size:12line-height:20font-family:"微软雅黑";}
&body&&!--主体 身体--&
&divid="message"&
&p&有什么新鲜事想告诉大家?&/p&
&divclass="edit"contenteditable="true"&&/div&&!--编辑区域--&
&divclass="but"&
&imgsrc="images/bba_thumb.gif"class="imgface" /&
&spanclass="msg_but"&发表&/span&
&divclass="face"&
&li&&imgsrc="images/zz2_thumb.gif"title="[织]"&&/li&
&li&&imgsrc="images/horse2_thumb.gif"title="[神马]"&&/li&
&li&&imgsrc="images/fuyun_thumb.gif"title="[浮云]"&&/li&
&li&&imgsrc="images/geili_thumb.gif"title="[给力]"&&/li&
&li&&imgsrc="images/wg_thumb.gif"title="[围观]"&&/li&
&li&&imgsrc="images/vw_thumb.gif"title="[威武]"&&/li&
&li&&imgsrc="images/panda_thumb.gif"title="[熊猫]"&&/li&
&li&&imgsrc="images/rabbit_thumb.gif"title="兔子]"&&/li&
&li&&imgsrc="images/otm_thumb.gif"title="[奥特曼]"&&/li&
&li&&imgsrc="images/j_thumb.gif"title="[囧]"&&/li&
&li&&imgsrc="images/hufen_thumb.gif"title="[互粉]"&&/li&
&li&&imgsrc="images/liwu_thumb.gif"title="[礼物]"&&/li&
&li&&imgsrc="images/smilea_thumb.gif"title="呵呵]"&&/li&
&li&&imgsrc="images/tootha_thumb.gif"title="嘻嘻]"&&/li&
&li&&imgsrc="images/laugh.gif"title="[哈哈]"&&/li&
&li&&imgsrc="images/tza_thumb.gif"title="[可爱]"&&/li&
&li&&imgsrc="images/kl_thumb.gif"title="[可怜]"&&/li&
&li&&imgsrc="images/kbsa_thumb.gif"title="[挖鼻屎]"&&/li&
&li&&imgsrc="images/cj_thumb.gif"title="[吃惊]"&&/li&
&li&&imgsrc="images/shamea_thumb.gif"title="[害羞]"&&/li&
&li&&imgsrc="images/zy_thumb.gif"title="[挤眼]"&&/li&
&li&&imgsrc="images/bz_thumb.gif"title="[闭嘴]"&&/li&
&li&&imgsrc="images/bs2_thumb.gif"title="[鄙视]"&&/li&
&li&&imgsrc="images/lovea_thumb.gif"title="[爱你]"&&/li&
&li&&imgsrc="images/sada_thumb.gif"title="[泪]"&&/li&
&li&&imgsrc="images/heia_thumb.gif"title="[偷笑]"&&/li&
&li&&imgsrc="images/qq_thumb.gif"title="[亲亲]"&&/li&
&li&&imgsrc="images/sb_thumb.gif"title="[生病]"&&/li&
&li&&imgsrc="images/mb_thumb.gif"title="[太开心]"&&/li&
&li&&imgsrc="images/ldln_thumb.gif"title="[懒得理你]"&&/li&
&li&&imgsrc="images/yhh_thumb.gif"title="[右哼哼]"&&/li&
&li&&imgsrc="images/zhh_thumb.gif"title="[左哼哼]"&&/li&
&li&&imgsrc="images/x_thumb.gif"title="[嘘]"&&/li&
&li&&imgsrc="images/cry.gif"title="[衰]"&&/li&
&li&&imgsrc="images/wq_thumb.gif"title="[委屈]"&&/li&
&li&&imgsrc="images/t_thumb.gif"title="[吐]"&&/li&
&li&&imgsrc="images/k_thumb.gif"title="[打哈气]"&&/li&
&li&&imgsrc="images/bba_thumb.gif"title="[抱抱]"&&/li&
&li&&imgsrc="images/angrya_thumb.gif"title="[怒]"&&/li&
&li&&imgsrc="images/yw_thumb.gif"title="[疑问]"&&/li&
&li&&imgsrc="images/cza_thumb.gif"title="[馋嘴]"&&/li&
&li&&imgsrc="images/88_thumb.gif"title="[拜拜]"&&/li&
&li&&imgsrc="images/sk_thumb.gif"title="[思考]"&&/li&
&li&&imgsrc="images/sweata_thumb.gif"title="[汗]"&&/li&
&li&&imgsrc="images/sleepya_thumb.gif"title="[困]"&&/li&
&li&&imgsrc="images/sleepa_thumb.gif"title="[睡觉]"&&/li&
&li&&imgsrc="images/money_thumb.gif"title="[钱]"&&/li&
&li&&imgsrc="images/sw_thumb.gif"title="[失望]"&&/li&
&li&&imgsrc="images/cool_thumb.gif"title="[酷]"&&/li&
&li&&imgsrc="images/hsa_thumb.gif"title="[花心]"&&/li&
&li&&imgsrc="images/hatea_thumb.gif"title="[哼]"&&/li&
&li&&imgsrc="images/gza_thumb.gif"title="[鼓掌]"&&/li&
&li&&imgsrc="images/dizzya_thumb.gif"title="[晕]"&&/li&
&li&&imgsrc="images/bs_thumb.gif"title="[悲伤]"&&/li&
&li&&imgsrc="images/crazya_thumb.gif"title="[抓狂]"&&/li&
&li&&imgsrc="images/h_thumb.gif"title="[黑线]"&&/li&
&li&&imgsrc="images/yx_thumb.gif"title="[阴险]"&&/li&
&li&&imgsrc="images/nm_thumb.gif"title="[怒骂]"&&/li&
&li&&imgsrc="images/hearta_thumb.gif"title="[心]"&&/li&
&li&&imgsrc="images/unheart.gif"title="[伤心]"&&/li&
&li&&imgsrc="images/pig.gif"title="[猪头]"&&/li&
&li&&imgsrc="images/ok_thumb.gif"title="[ok]"&&/li&
&li&&imgsrc="images/ye_thumb.gif"title="[耶]"&&/li&
&li&&imgsrc="images/good_thumb.gif"title="[good]"&&/li&
&li&&imgsrc="images/no_thumb.gif"title="[不要]"&&/li&
&li&&imgsrc="images/z2_thumb.gif"title="[赞]"&&/li&
&li&&imgsrc="images/come_thumb.gif"title="[来]"&&/li&
&li&&imgsrc="images/sad_thumb.gif"title="[弱]"&&/li&
&li&&imgsrc="images/lazu_thumb.gif"title="[蜡烛]"&&/li&
&li&&imgsrc="images/clock_thumb.gif"title="[钟]"&&/li&
&li&&imgsrc="images/cake.gif"title="[蛋糕]"&&/li&
&li&&imgsrc="images/m_thumb.gif"title="[话筒]"&&/li&
&li&&imgsrc="images/weijin_thumb.gif"title="[围脖]"&&/li&
&li&&imgsrc="images/lxhzhuanfa_thumb.gif"title="[转发]"&&/li&
&li&&imgsrc="images/lxhluguo_thumb.gif"title="[路过这儿]"&&/li&
&li&&imgsrc="images/bofubianlian_thumb.gif"title="[bofu变脸]"&&/li&
&li&&imgsrc="images/gbzkun_thumb.gif"title="[gbz困]"&&/li&
&li&&imgsrc="images/boboshengmenqi_thumb.gif"title="[生闷气]"&&/li&
&li&&imgsrc="images/chn_buyaoya_thumb.gif"title="[不要啊]"&&/li&
&li&&imgsrc="images/daxiongleibenxiong_thumb.gif"title="[dx泪奔]"&&/li&
&li&&imgsrc="images/cat_yunqizhong_thumb.gif"title="[运气中]"&&/li&
&li&&imgsrc="images/youqian_thumb.gif"title="[有钱]"&&/li&
&li&&imgsrc="images/cf_thumb.gif"title="[冲锋]"&&/li&
&li&&imgsrc="images/camera_thumb.gif"title="[照相机]"&&/li&
&divclass="msgBox"&
&scripttype="text/javascript"src="js/jquery-1.10.2.min.js"&&/script&
&scripttype="text/javascript"&
//展开表情
$(".imgface").click(function(e){
$(".face").slideDown();//向下展开
e.stopPropagation();//阻止冒泡
$(document).click(function(){
$(".face").slideUp();//向上收缩
//点击表情
$(".face ul li").click(function(){
var _img=$(this).find("img").clone();//当前 img find() 查找 找到
$(".edit").append(_img);//追加
$(".msg_but").click(function(){
var _txt=$(".edit").html();//获取当前编辑区域的内容（包括标签）
if(_txt ==""){
$(".edit").focus();//获取焦点
$(".msgBox").append("&div class='msgInfo'&&dl&&dt&&img src='images/IT潇潇.jpg' width='46' height='46'/&&/dt&&dd&IT潇潇&/dd&&/dl&&div class='con'&"+_txt+"&/div&&/div&");
$(".edit").html("");
web前端学习群：，分享源码、视频、企业级案例、最新知识点，欢迎初学者和在进阶中的小伙伴。关注公众号→‘学习web前端’跟大佬一起学前端！
没有更多推荐了，大佬，我觉得你说的太对了，有qq号吗交个朋友_百度知道
大佬，我觉得你说的太对了，有qq号吗交个朋友
我有更好的答案
我常常因为看不懂问题而与你们显得格格不入…
为您推荐：
您可能关注的内容
换一换
回答问题，赢新手礼包
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。天极传媒：天极网全国分站
您现在的位置：&&&&&&
QQ搞笑说说：累么？累就对了,舒服是留给死人的来源：天极网QQ专区编辑：小祥
关键字：QQ搞笑说说,QQ说说
　　1、牛B的永远是少数，装B的普遍存在，傻B则满山遍野到处是。
　　2、不经历人渣，怎么能出嫁，没有人能随随便便当妈。
　　3、给老子摆正位置不要乱放屁，不要太把自己当回事儿。
　　4、意见一致，你说了算。意见不一致，我说了算。
　　5、以你的理解能力，我解释了你也不见得懂，所以，你继续渺茫吧!
　　6、能认识自己是个什么东西，都是好样的。
　　7、男人被甩，金钱问题;女人被甩，相貌问题;我被甩，你他妈脑袋有问题。
　　8、你肺活量是多少啊，能把牛B吹的这么大。
　　9、你的新欢，不照样是别人的破鞋。
　　10、我不是看不起你，而是压根就懒得理你。
　　11、我爱你的时候，你打我骂我，我都忍了，我不爱你了，你再碰我试试。
* 网友发言均非本站立场，本站不在评论栏推荐任何网店、经销商，谨防上当受骗！
声明：凡注明为其他媒体来源的信息，均为转载自其他媒体。您若对该稿件内容有任何疑问或质疑，请即与天极网联系，本网将迅速给您回应并做处理。010-
Q签名Q教程Q游戏Q日志
Q图片Q头像Q皮肤Q网名当前位置：
<Input id="prev" onclick="javascript:window.open('/xq/sq/84777.html', '_self')" type="button" value="
qq表情：不知道你在说什么，但保持这个表情就对了发布时间：
部分图片来自于网络, 其版权归原作者所有，如有侵权, 请及时告知, 我们将确认后删除
永恒网qq表情党, 版权所有，如需转载图片请注明出处使用手机微信扫码登录
提示：网页版微信需要使用浏览器Cookie来帮助你登录，以便运行网页版应用程序。
网页版微信需要配合手机使用
二维码失效，点击刷新
提示：网页版微信需要使用浏览器Cookie来帮助你登录，以便运行网页版应用程序。
请在手机点击确认登录
提示：网页版微信需要使用浏览器Cookie来帮助你登录，以便运行网页版应用程序。
网络连接已断开
请检查你的网络设置