大师网-带你快速走向大师之路 解决你在学习过程中的疑惑,带你快速进入大师之门。节省时间,提升效率

空间说说还能这样玩?jquery开发腾讯QQ空间说说发表效果

web前端学习群,189394454,有视频、源码、学习方法等大量干货分享

经常发说说的朋友对这效果很熟悉吧,对的,就是空间说说发表,每天发说说是这样发,但是怎么做到的呢?
html代码:

    <div id="message">
        <p>有什么新鲜事想告诉大家?</p>
        <div class="edit" contenteditable="true"></div><!--编辑区域-->
        <div class="but">
            <img src="images/bba_thumb.gif" class="imgface" />
            <span class="msg_but">发表</span>
            <div class="face">
                <ul>
                    <li><img src="images/zz2_thumb.gif" title="[织]"></li>
                    <li><img src="images/horse2_thumb.gif" title="[神马]"></li>
                    <li><img src="images/fuyun_thumb.gif" title="[浮云]"></li>
                    <li><img src="images/geili_thumb.gif" title="[给力]"></li>
                    <li><img src="images/wg_thumb.gif" title="[围观]"></li>
                    <li><img src="images/vw_thumb.gif" title="[威武]"></li>
                    <li><img src="images/panda_thumb.gif" title="[熊猫]"></li>
                    <li><img src="images/rabbit_thumb.gif" title="兔子]"></li>
                    <li><img src="images/otm_thumb.gif" title="[奥特曼]"></li>
                    <li><img src="images/j_thumb.gif" title="[囧]"></li>
                    <li><img src="images/hufen_thumb.gif" title="[互粉]"></li>
                    <li><img src="images/liwu_thumb.gif" title="[礼物]"></li>
                    <li><img src="images/smilea_thumb.gif" title="呵呵]"></li>
                    <li><img src="images/tootha_thumb.gif" title="嘻嘻]"></li>
                    <li><img src="images/laugh.gif" title="[哈哈]"></li>
                    <li><img src="images/tza_thumb.gif" title="[可爱]"></li>
                    <li><img src="images/kl_thumb.gif" title="[可怜]"></li>
                    <li><img src="images/kbsa_thumb.gif" title="[挖鼻屎]"></li>
                    <li><img src="images/cj_thumb.gif" title="[吃惊]"></li>
                    <li><img src="images/shamea_thumb.gif" title="[害羞]"></li>
                    <li><img src="images/zy_thumb.gif" title="[挤眼]"></li>
                    <li><img src="images/bz_thumb.gif" title="[闭嘴]"></li>
                    <li><img src="images/bs2_thumb.gif" title="[鄙视]"></li>
                    <li><img src="images/lovea_thumb.gif" title="[爱你]"></li>
                    <li><img src="images/sada_thumb.gif" title="[泪]"></li>
                    <li><img src="images/heia_thumb.gif" title="[偷笑]"></li>
                    <li><img src="images/qq_thumb.gif" title="[亲亲]"></li>
                    <li><img src="images/sb_thumb.gif" title="[生病]"></li>
                    <li><img src="images/mb_thumb.gif" title="[太开心]"></li>
                    <li><img src="images/ldln_thumb.gif" title="[懒得理你]"></li>
                    <li><img src="images/yhh_thumb.gif" title="[右哼哼]"></li>
                    <li><img src="images/zhh_thumb.gif" title="[左哼哼]"></li>
                    <li><img src="images/x_thumb.gif" title="[嘘]"></li>
                    <li><img src="images/cry.gif" title="[衰]"></li>
                    <li><img src="images/wq_thumb.gif" title="[委屈]"></li>
                    <li><img src="images/t_thumb.gif" title="[吐]"></li>
                    <li><img src="images/k_thumb.gif" title="[打哈气]"></li>
                    <li><img src="images/bba_thumb.gif" title="[抱抱]"></li>
                    <li><img src="images/angrya_thumb.gif" title="[怒]"></li>
                    <li><img src="images/yw_thumb.gif" title="[疑问]"></li>
                    <li><img src="images/cza_thumb.gif" title="[馋嘴]"></li>
                    <li><img src="images/88_thumb.gif" title="[拜拜]"></li>
                    <li><img src="images/sk_thumb.gif" title="[思考]"></li>
                    <li><img src="images/sweata_thumb.gif" title="[汗]"></li>
                    <li><img src="images/sleepya_thumb.gif" title="[困]"></li>
                    <li><img src="images/sleepa_thumb.gif" title="[睡觉]"></li>
                    <li><img src="images/money_thumb.gif" title="[钱]"></li>
                    <li><img src="images/sw_thumb.gif" title="[失望]"></li>
                    <li><img src="images/cool_thumb.gif" title="[酷]"></li>
                    <li><img src="images/hsa_thumb.gif" title="[花心]"></li>
                    <li><img src="images/hatea_thumb.gif" title="[哼]"></li>
                    <li><img src="images/gza_thumb.gif" title="[鼓掌]"></li>
                    <li><img src="images/dizzya_thumb.gif" title="[晕]"></li>
                    <li><img src="images/bs_thumb.gif" title="[悲伤]"></li>
                    <li><img src="images/crazya_thumb.gif" title="[抓狂]"></li>
                    <li><img src="images/h_thumb.gif" title="[黑线]"></li>
                    <li><img src="images/yx_thumb.gif" title="[阴险]"></li>
                    <li><img src="images/nm_thumb.gif" title="[怒骂]"></li>
                    <li><img src="images/hearta_thumb.gif" title="[心]"></li>
                    <li><img src="images/unheart.gif" title="[伤心]"></li>
                    <li><img src="images/pig.gif" title="[猪头]"></li>
                    <li><img src="images/ok_thumb.gif" title="[ok]"></li>
                    <li><img src="images/ye_thumb.gif" title="[耶]"></li>
                    <li><img src="images/good_thumb.gif" title="[good]"></li>
                    <li><img src="images/no_thumb.gif" title="[不要]"></li>
                    <li><img src="images/z2_thumb.gif" title="[赞]"></li>
                    <li><img src="images/come_thumb.gif" title="[来]"></li>
                    <li><img src="images/sad_thumb.gif" title="[弱]"></li>
                    <li><img src="images/lazu_thumb.gif" title="[蜡烛]"></li>
                    <li><img src="images/clock_thumb.gif" title="[钟]"></li>
                    <li><img src="images/cake.gif" title="[蛋糕]"></li>
                    <li><img src="images/m_thumb.gif" title="[话筒]"></li>
                    <li><img src="images/weijin_thumb.gif" title="[围脖]"></li>
                    <li><img src="images/lxhzhuanfa_thumb.gif" title="[转发]"></li>
                    <li><img src="images/lxhluguo_thumb.gif" title="[路过这儿]"></li>
                    <li><img src="images/bofubianlian_thumb.gif" title="[bofu变脸]"></li>
                   <li><img src="images/gbzkun_thumb.gif" title="[gbz困]"></li>
                    <li><img src="images/boboshengmenqi_thumb.gif" title="[生闷气]"></li>
                    <li><img src="images/chn_buyaoya_thumb.gif" title="[不要啊]"></li>
                    <li><img src="images/daxiongleibenxiong_thumb.gif" title="[dx泪奔]"></li>
                    <li><img src="images/cat_yunqizhong_thumb.gif" title="[运气中]"></li>
                    <li><img src="images/youqian_thumb.gif" title="[有钱]"></li>
                    <li><img src="images/cf_thumb.gif" title="[冲锋]"></li>
                    <li><img src="images/camera_thumb.gif" title="[照相机]"></li>  
                </ul>
            </div>
        </div>
    </div>
    <div class="msgBox">
        
    </div>

css代码:

    <style type="text/css">
        *{margin:0px;/*外边距*/padding:0px;/*内边距*/}
        ul,li{list-style:none;}
        body{background:url("images/bg_04.jpg");
            background-size:cover;}
        #message{width:600px;/*宽度*/
                height:170px;/*高度 px像素 pt em vh*/
                background:#fff;
                margin:200px auto 0;/*上  左右  下*/
                border-radius:5px;/*css3 圆角*/}
        #message p{font-size:12px;/*字体大小*/
                   font-family:"微软雅黑"; /*字体类型*/
                   color:#666;
                   height:40px;
                   /*border:1px solid #000;/*边框 宽度 风格 颜色*/
                   line-height:40px;
                   text-indent:20px;/*首行缩进*/}
        #message .edit{width:560px;
                       height:70px;
                       border:1px solid #ccc;
                       margin:0 auto;}
        #message .but{width:560px;height:40px;/*border:1px solid #000;*/margin:15px auto 0;position:relative;/*参照物*/}
        #message .but .msg_but{width:80px;height:30px;background:#7db718;display:inline-block;/*行间块级 block块级  none隐藏 inline行间*/font-size:12px;color:#fff;font-family:"微软雅黑";text-align:center;/*对齐方式*/line-height:30px;border-radius:3px;float:right;}
        #message .but .imgface{cursor:pointer;/*指针形状*/}
        #message .but .msg_but{cursor:pointer;/*指针形状*/}
        #message .but .face{width:395px;height:160px;background:#fff;border:1px solid #ddd;position:absolute;top:20px;left:20px;padding:10px;display:none;}
        #message .but .face ul li{width:22px;height:22px;float:left;margin:2px;}

        .msgBox{width:600px;margin:15px auto;}
        .msgBox .msgInfo{width:580px;background:#fff;padding:10px;margin-bottom:10px;}
        .msgBox .msgInfo dl{width:100%;height:60px;border-bottom:1px solid #ddd;}
        .msgBox .msgInfo dl dt{width:50px;height:50px;float:left;}
        .msgBox .msgInfo dl dd{width:500px;height:50px;line-height:50px;font-family:"微软雅黑";
        font-size:14px;float:right;}
        .msgBox .msgInfo .con{font-size:12px;line-height:20px;font-family:"微软雅黑";} 
    </style>

javascript代码:

 <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
 <script type="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();  //获取焦点
        }
        else{
            $(".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("");
        }
    });

 </script>