<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
html,body,#wrapper{height: 100%; 100%;}
/*html{font-size: 100px;}*/
body{
font-size: 14px;
display: flex;
}
*{
box-sizing: border-box;
margin: 0;padding: 0;
}
ul,li{list-style: none;}
#chat{
display: flex;
flex-direction: column;
566px;
height: 507px;
background: #F5F5F5;
box-shadow: 0px 0px 1px 0px #D9D9D9;
position: absolute;
left: 0;
top: 0;
}
#chatTop,#chatBottom{padding: 20px;}
#chatTop{
min-height: 360px;
overflow-y: auto;
}
/*滚动条样式*/
#chatTop::-webkit-scrollbar {/*滚动条整体样式*/
10px; /*高宽分别对应横竖滚动条的尺寸*/
height: 1px;
}
#chatTop::-webkit-scrollbar-thumb {/*滚动条里面小方块*/
border-radius: 10px;
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
background: #535353;
height: 10px;
}
#chatTop::-webkit-scrollbar-track {/*滚动条里面轨道*/
-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.2);
border-radius: 10px;
background: #EDEDED;
}
.chatTitle,.seeMore{height: 30px;}
.chatContent{
min-height: 30px;
298px;
word-wrap: break-word;
}
#chatBottom{
height: 147px;
border-top: 1px solid #ECECEC;
background: #fff;
}
.divSend{
text-align: right;
}
.btnSend{
70px;
height: 25px;
padding: 2px 10px;
background: #F5F5F5;
color: #606060;
border: 1px solid #E5E5E5;
outline: none;
}
.btnSend:hover{
background: #129611;
color: #fff;
}
#describe{
height: 81px;
overflow-y: auto;
}
.seeMore{
color: dodgerblue;
text-align: center;
cursor: pointer;
display: none;
}
</style>
</head>
<body>
<div id="chat">
<div id="chatTop" class="">
<div class="seeMore">查看更多</div>
<ul>
<!--<li class="seeMore">查看更多</li>-->
<li class="">
<div class="chatTitle">
<span class="chatRank">【群主】</span>
<span class="chatAddr">【北京】</span>
<span class="chatName">昵称</span>
<span class="chatTime">08:06:06</span>
</div>
<div class="chatContent">早上好小火把</div>
</li>
<li class="">
<div class="chatTitle">
<span class="chatRank">【群主】</span>
<span class="chatAddr">【北京】</span>
<span class="chatName">昵称</span>
<span class="chatTime">08:06:06</span>
</div>
<div class="chatContent">早上好小火把</div>
</li>
<li class="">
<div class="chatTitle">
<span class="chatRank">【群主】</span>
<span class="chatAddr">【北京】</span>
<span class="chatName">昵称</span>
<span class="chatTime">08:06:06</span>
</div>
<div class="chatContent">早上好小火把</div>
</li>
<li class="">
<div>
<div class="chatTitle">
<span class="chatRank">【群主】</span>
<span class="chatAddr">【北京】</span>
<span class="chatName">昵称</span>
<span class="chatTime">08:06:06</span>
</div>
<div class="chatContent">早上好小火把</div>
</div>
</li>
</ul>
</div>
<div id="chatBottom">
<div class="describe">
<div id="describe" contentEditable='true'></div>
</div>
<div class="divSend">
<button class="btnSend">发送(S)</button>
</div>
</div>
</div>
<script src="jquery-2.1.4.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(".seeMore").click(function(){//查看更多 显示 隐藏
$(this).toggle();
})
$('#chat .describe,#chatTop li div').mousedown(function(e) {//禁止拖拽
e.stopPropagation();///不再派发事件
})
//拖拽窗口
$('#chat').mousedown(function(e) {
var positionDiv = $(this).offset();
var distenceX = e.pageX - positionDiv.left;
var distenceY = e.pageY - positionDiv.top;
$(document).mousemove(function(e) {
var x = e.pageX - distenceX;
var y = e.pageY - distenceY;
if (x < 0) {
x = 0;
} else if (x > $(document).width() - $('#chat').outerWidth(true)) {
x = $(document).width() - $('#chat').outerWidth(true);
}
if (y < 0) {
y = 0;
} else if (y > $(document).height() - $('#chat').outerHeight(true)) {
y = $(document).height() - $('#chat').outerHeight(true);
}
$('#chat').css({
'left': x + 'px',
'top': y + 'px'
});
});
$(document).mouseup(function() {
$(document).off('mousemove');
});
});
//发送
$(".btnSend").click(function(){
sendFun();
})
$('.describe').bind('keyup', function(event) {//回车后 执行
if (event.keyCode == "13") {
//回车执行查询
sendFun();
}
});
function sendFun(){//发送
var chatBottomContent=$("#describe").html();
if(chatBottomContent){
var html=`
<li class="">
<div>
<div class="chatTitle">
<span class="chatRank">【群主】</span>
<span class="chatAddr">【北京】</span>
<span class="chatName">昵称</span>
<span class="chatTime">08:06:06</span>
</div>
<div class="chatContent">${chatBottomContent}</div>
</div>
</li>
`;
$("#chatTop ul").append(html);
$("#describe").html("");
$("#chatTop").scrollTop ($("#chatTop ul").height());
}
}
$("#chatTop").hover(function(){//用来判断内容超出 滚动条显示
$(this).css("overflow","auto")
},function(){
$(this).css("overflow","hidden")
})
</script>
</body>
</html>