仿照qq聊天，包含气泡消息发送

最新推荐文章于 2021-05-28 11:24:39 发布

小蒜瓣

最新推荐文章于 2021-05-28 11:24:39 发布

阅读量760

点赞数

分类专栏： UI 编码文章标签：微信 qq聊天

本文链接：https://blog.csdn.net/messicr7/article/details/72637524

版权

编码同时被 2 个专栏收录

44 篇文章 2 订阅

订阅专栏

28 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>密聊</title>
<style type="text/css">
.box{margin:auto;position: relative;margin-top: 10%; width: 650px; height: 490px;}
.bg-color{background-color: #217fbd; color: #fff;}
.bg-color-f5{background-color: #f5f5f5; color: #333;}
.border{border:1px solid #f5f5f5;}
.box-shadow{-moz-box-shadow: 3px 1px 5px #ddd; /* 老的 Firefox */box-shadow: 3px 1px 5px #ddd;}
.fr{float: right;}

.option{width: 50px; height:100%;float: left;}

.user-list{width: 200px; height:100%;float: left; border-right: : 1px solid #f5f5f5; margin-left: -1px;}

.note-box{width: 400px; height:100%; float: left;}

.talk-top{width: 380px; height: 50px; margin-left: 20px; border-bottom: 1px solid #ddd;margin-bottom: -1px; line-height: 50px; }

.talk-body{width: 360px; height: 310px; margin-left: 20px; padding-right: 20px; margin-right: -20px; line-height: 35px;font-size: 14px; overflow-y: scroll;}
.talk-body .talk-media{width: 100%; float: left; padding-top: 5px;padding-bottom: 5px;}
.talk-body .talk-media .time{text-align: center; color: #ddd;}
.talk-body .talk-media .user-head-l{width: 35px; height: 35px; border-radius: 50%; border:1px solid #f5f5f5; float: left;}
.talk-body .talk-media .user-note-l{position: relative; width: 60%; min-height: 35px; border-radius: 5px; float: left; margin-left: 10px;padding: 10px 10px; line-height: 25px;}
.talk-body .talk-media .user-note-l .arrowl {position:absolute;top:10px;left:-16px; /* 圆角的位置需要细心调试哦 */width:0;height:0;font-size:0;border:solid 8px;border-color:transparent #f5f5f5 transparent transparent;}
.talk-body .talk-media .user-head-r{width: 35px; height: 35px; border-radius: 50%; border:1px solid #f5f5f5; float: right;}
.talk-body .talk-media .user-note-r{position: relative; width: 60%; min-height: 35px; border-radius: 5px; float: right; margin-right: 10px;padding: 10px 10px; line-height: 25px;}
.talk-body .talk-media .user-note-r .arrowr {position:absolute;top:10px;right:-16px; /* 圆角的位置需要细心调试哦 */width:0;height:0;font-size:0;border:solid 8px;border-color:transparent transparent transparent #217fbd;}

.talk-bottom{width: 380px; height: 130px; margin-left: 20px; margin-right: 20px; border-top: 1px solid #ddd; margin-top: -1px; line-height: 26px;}
.talk-bottom .emotion{ width:360px; height: 35px; margin-right: 20px; float: left; }
.talk-bottom .inputtext{ width:360px; height: 60px; margin-right: 20px; float: left; }
.talk-bottom .inputtext textarea{width: 100%;border:0px; outline: none;}
.talk-bottom .button{ width:360px; margin-right: 20px; float: left; text-align: right; }
</style>
</head>
<body>
<div class="box border">

<div class="option bg-color box-shadow">

</div>
<div class="user-list box-shadow">
<br><br>
<button οnclick="javascript:window.location.href='talk.html'">选项一</button>
<br><br>
<button οnclick="javascript:window.location.href='talk.html'">选项一</button>
</div>
<div class="note-box box-shadow">
<div class="talk-top">
陈洁
</div>
<div class="talk-body" id="note-box">
<div class="talk-media">
<div class="time">
22:00
</div>
</div>
<div class="talk-media">
<img src="" class="user-head-l" alt="头像">
<div class="user-note-l bg-color-f5"><div class="arrowl"></div>
陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁
</div>
</div>
<div class="talk-media">
<img src="" class="user-head-r" alt="头像">
<div class="user-note-r bg-color"><div class="arrowr"></div>
陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁
</div>
</div>
<div class="talk-media">
<img src="" class="user-head-r" alt="头像">
<div class="user-note-r bg-color"><div class="arrowr"></div>
陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁陈洁
</div>
</div>
</div>
<div class="talk-bottom">
<div class="emotion">
</div>
<div class="inputtext">
<textarea rows="3" id="note"></textarea>
</div>
<div class="button">
<button id="up">发送</button>
</div>

</div>
</div>

</div>
<script typet="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#note-box").scrollTop(2000);
$("#up").click(function(){
var notecontent=$("#note").val();
if (notecontent == "") {
alert("请输入内容");
}
else{
$("#note-box").append('<div class="talk-media"><img src="" class="user-head-r" alt="头像"><div class="user-note-r bg-color">'+ notecontent +'</div></div>');
$("#note-box").scrollTop(2000);
$("#note").val("");
}

})
})
</script>
</body>
</html>