一款css3结合jquery的聊天界面

为了让项目更加的“亲民”，这种聊天的需求越来越常见，今天，我们就从第一步开始，写一个简单轻便复用性高的聊天界面
这次，不先上代码，先上图

Paste_Image.png

不急，下面会贴出全部的代码！现在，咱们先来聊聊制作这个界面的主要几个点
1、纯CSS3实现聊天框小尖角，即边框法

![Uploading WechatIMG8_908204.jpeg . . .]

边框法
简单点说，就是用两个标签或无标签 – 使用:before与:after伪类，形成的两个不同的边框进行组合显示实现的一些效果。

html代码
<ul class="chat-thread"> 
   <li>我是用边框法实现的指向右侧的对话框噢～</li>
    <li>我是用边框法实现的指向左侧的对话框噢～</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>
    我是用边框法实现的背景白色的对话框噢
</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、保证新发出来的消息在可见框的最底部，即每次增加消息，回滚滚动条保持在底部

将滚动条滚动到任意的位置

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、如何使用？
很简单，下载了代码之后，（注：称上图有头像的的一方为别人发，没有头像的一方为自己发）
调用chat(element,imgSrc,doctextContent)
三个参数，默认值为undefind，其说明如下

WechatIMG10.jpeg

<script>
    $(document).ready(function(){ 
       //别人发
       chat("leftBubble","images/head_portrait.png","您好，欢迎关注博客：http://write.blog.csdn.net/postlist"); 
       $(".send-btn").click(function(){ 
             //自己发，点击了发送        
           chat("rightBubble");  
            //清空输入框
            $('.chat-info').html(''); 
       }) 
   })
</script>

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

一款css3结合jquery的聊天界面

推荐阅读更多精彩内容