一款简单的Jquery聊天窗口

前端html代码

样式

html,body{margin: 0;height:100%;}
.chatContainer{height:100%;position: relative;background: url(chat_bg.jpg) no-repeat;background-size: cover;}
.chatContainer .chatBox{padding:5px; background: rgba(0,0,0,0.35);overflow-y: auto;position: absolute;top: 0;right: 0;bottom: 85px;left: 0}
.chatContainer .chatBox .item{padding:3px 0px;}
.chatContainer .chatBox .item-title span{color:#3dbfff;font-size:12px}
.chatContainer .chatBox .create-name{;margin-right: 10px}
.chatContainer .chatBox .item-message{color: #f8f8f8;font-size:12px;word-break: break-all;}
.chatContainer .oporation{padding:5px;}
.chatContainer .oporation .icon{width:25px;height:25px;display: inline-block;}
.chatContainer .oporation img{width:25px;height:25px;}
.chatContainer .chatFooter{position: fixed;bottom: 0;left: 0;width: 100%;border-top:1px solid #757f90}
.chatContainer .chatInput{overflow: hidden;}
.chatContainer .message-input{resize:none;height: 50px;width:80%;box-sizing: border-box;float: left;}
.chatContainer .send{width:20%;height: 50px;color: #fff;background:#f80;font-size: 14px;text-align: center;box-sizing: border-box;border:none;}

引入QQ表情样式

引入jquery库和QQ表情js文件

javascript

下载地址