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