為了讓項目更加的“親民”，這種聊天的需求越來越常見，今天，我們就從第一步開始，寫一個簡單輕便復用性高的聊天界面
這次，不先上代碼，先上圖

Paste_Image.png

不急，下面會貼出全部的代碼！現(xiàn)在，咱們先來聊聊制作這個界面的主要幾個點
1、純CSS3實現(xiàn)聊天框小尖角，即邊框法

![Uploading WechatIMG8_908204.jpeg . . .]

• 邊框法
  簡單點說，就是用兩個標簽或無標簽 – 使用:before與:after偽類，形成的兩個不同的邊框進行組合顯示實現(xiàn)的一些效果。

html代碼
<ul class="chat-thread"> 
   <li>我是用邊框法實現(xiàn)的指向右側(cè)的對話框噢～</li>
    <li>我是用邊框法實現(xiàn)的指向左側(cè)的對話框噢～</li>
</ul>
css3代碼
.chat-thread {    margin: 24px auto 0 auto;    padding: 0 20px 0 0;    list-style: none;    overflow-y: scroll;    overflow-x: hidden;}
.chat-thread li {    position: relative;    clear: both;    display: inline-block;    padding: 16px 40px 16px 20px;    margin: 0 0 20px 0;    font: 16px/20px 'Noto Sans', sans-serif;    border-radius: 10px;    background-color: rgba(25, 147, 147, 0.2);}
.chat-thread li:before {    position: absolute;    top: 0;    width: 50px;    height: 50px;    border-radius: 50px;    content: '';}
.chat-thread li:after {    position: absolute;    top: 15px;    content: '';    width: 0;    height: 0;    border-top: 15px solid rgba(25, 147, 147, 0.2);}
.chat-thread li:nth-child(odd) {    animation: show-chat-odd 0.15s 1 ease-in;    -moz-animation: show-chat-odd 0.15s 1 ease-in;    -webkit-animation: show-chat-odd 0.15s 1 ease-in;    float: right;    margin-right: 80px;    color: #0AD5C1;}
.chat-thread li:nth-child(odd):before {    right: -80px;}
.chat-thread li:nth-child(odd):after {    border-right: 15px solid transparent;    right: -15px;}
.chat-thread li:nth-child(even) {    animation: show-chat-even 0.15s 1 ease-in;    -moz-animation: show-chat-even 0.15s 1 ease-in;    -webkit-animation: show-chat-even 0.15s 1 ease-in;    float: left;    margin-left: 80px;    color: #0EC879;}
.chat-thread li:nth-child(even):before {    left: -80px;}
.chat-thread li:nth-child(even):after {    border-left: 15px solid transparent;    left: -15px;}

WechatIMG9.jpeg

html代碼
<div class="chat-thread">
    <span class="bot"></span>
    <span class="top"></span>
    我是用邊框法實現(xiàn)的背景白色的對話框噢
</div>
css代碼
.chat-thread{padding:10px 2px; border:5px solid #beceeb; position:relative;border-radius: 6px}
.chat-thread span{width:0; height:0; overflow:hidden; position:absolute;}
.chat-thread span.bot{    border-width:20px;    border-style:solid dashed dashed;    border-color:#beceeb transparent transparent;    left:80px;    bottom:-40px;}
.chat-thread span.top{    border-width:20px;    border-style:solid dashed dashed;    border-color:#ffffff transparent transparent;    left:80px;    bottom:-33px;}

2、保證新發(fā)出來的消息在可見框的最底部，即每次增加消息，回滾滾動條保持在底部

• 將滾動條滾動到任意的位置

var container = $('div'), 
scrollTo = $('#row_8');
container.scrollTop(scrollTo.offset().top - container.offset().top + container.scrollTop());  
 // 或者
container.animate({
      scrollTop: scrollTo.offset().top - container.offset().top + container.scrollTop()
 });

• 知道了如何將滾動條滾動到對應的位置了，那滾動到底部就不難了，即當前滾動的地方的窗口頂端到整個頁面頂端的距離

$box.append(createuser($textContent)).animate({scrollTop: $(document).height()}, 300);

3、如何使用？
很簡單，下載了代碼之后，（注：稱上圖有頭像的的一方為別人發(fā)，沒有頭像的一方為自己發(fā)）
調(diào)用chat(element,imgSrc,doctextContent)
三個參數(shù)，默認值為undefind，其說明如下

WechatIMG10.jpeg

<script>
    $(document).ready(function(){ 
       //別人發(fā)
       chat("leftBubble","images/head_portrait.png","您好，歡迎關注博客：http://write.blog.csdn.net/postlist"); 
       $(".send-btn").click(function(){ 
             //自己發(fā)，點擊了發(fā)送        
           chat("rightBubble");  
            //清空輸入框
            $('.chat-info').html(''); 
       }) 
   })
</script>

代碼下載：https://coding.net/u/Jill/p/dankal-jill/git