jQuery响应式聊天窗口界面

2025-10-29 10:44:25

1、新建html文档。

jQuery响应式聊天窗口界面

2、准备好需要用到的图标。

jQuery响应式聊天窗口界面

3、书写hmtl代码。

</div>

Conversations

</div>

</div>

<div class="ChatInfoName">这是用户的名字，看看名字到底能有多长</div>

</div>

</div>

自酌一杯酒

</div>

</div>

白兰地

</div>

</div>

威士忌

</div>

</div>

荷兰金酒

</div>

</div>

朗姆酒

</div>

</div>

特其拉酒

</div>

</div>

鸡尾酒

</div>

</div>

虎骨酒

</div>

</div>

琴酒

</div>

</div>

葡萄酒

</div>

</div>

蓝莓酒

</div>

</div>

樱花酒

</div>

</div>

</div>

给你看张图

</div>

</div>

</div>

</div>

<div class="chat-message">嗯，适合做壁纸</div>

</div>

<div>

</button>

<input type="file" onchange="selectImg(this)" accept="image/jpg,image/jpeg,image/png"

name="file" id="inputImage" class="hidden">

</label>

</button>

</div>

jQuery响应式聊天窗口界面

4、书写css代码。

.btn-default-styles { outline: none; resize: none; border: none; display: inline-block; padding: 5px 10px; margin-bottom: 0; font-size: 14px; font-weight: 400; line-height: 1.42857143; text-align: center; white-space: nowrap; vertical-align: middle; -ms-touch-action: manipulation; touch-action: manipulation; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; background-image: none; background: #bbb; color: #fff; border-radius: 4px; }

.btn-default-styles:focus { outline: none; }

.btn-default-styles:hover { background: #c5c5c5; animation: anniu 1s infinite; }

.btn-default-styles:active { box-shadow: 0 2px 3px rgba(0, 0, 0, .2) inset; }

.chatContainer { position: fixed; bottom: 20px; right: 20px; }

.chatBtn { width: 50px; height: 50px; background: #01bef0; color: #fff; line-height: 50px; text-align: center; border-radius: 50%; box-shadow: 2px 2px 2px #d4d4d4; cursor: pointer; position: absolute; bottom: 0; right: 0; overflow: hidden; }

.chatBtn:hover { background: #01b3df; box-shadow: none; }

.chatBtn>i { font-size: 25px; }

.chatBox { width: 370px; min-width: 320px; height: 570px; border-radius: 10px; background: #f5ecff; position: absolute; bottom: 0; right: 70px; overflow: hidden; border: solid 1px #d5d5d5; box-shadow: 1px 1px 2px #c0c0c0; z-index: 1005; }

.chatBox-head { width: 100%; height: 75px; background: #01aee0; position: absolute; top: 0; left: 0; }

.chatBox-head-one { width: 100%; height: 75px; line-height: 75px; color: #fff; font-size: 20px; text-align: center; position: absolute; top: 0; left: 0; }

.chatBox-head-two { width: 100%; height: 75px; color: #fff; padding: 10px 10px; display: none; position: absolute; top: 0; left: 0; }

.chat-return { float: left; width: 55px; height: 55px; line-height: 55px; border-radius: 10px; cursor: pointer; text-align: center; }

.chat-return:hover { background: #0188b7; }

.chat-close { float: right; width: 55px; height: 55px; line-height: 55px; border-radius: 10px; cursor: pointer; text-align: center; }

.chat-close:hover { background: #0188b7; }

.chat-people { float: left; }

.chat-people>div { height: 55px; display: inline-block; vertical-align: middle; line-height: 55px; margin-left: 5px; }

.chat-people>div:nth-of-type(1) { width: 50px; height: 50px; border-radius: 50%; background: #eee; overflow: hidden; }

.chat-people>div:nth-of-type(1)>img { width: 50px; height: 50px; }

.chat-people>div:nth-of-type(2) { width: 165px; text-align: left; height: 55px; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }

.chatBox-info { width: 100%; height: 495px; background: #fff; text-align: left; position: absolute; top: 75px; left: 0; }

.chatBox-list { width: 100%; height: 495px; overflow-y: scroll; }

.chat-list-people:hover { cursor: pointer; background: #f8f8f8; }

.chat-list-people>div { height: 55px; display: inline-block; vertical-align: middle; margin-left: 10px; }

.chat-list-people>div:nth-of-type(1) { width: 40px; height: 40px; border-radius: 50%; background: #eee; overflow: hidden; }

.chat-list-people>div:nth-of-type(1)>img { width: 40px; height: 40px; }

.chat-name { width: 230px; }

jQuery响应式聊天窗口界面

5、书写并添加js代码。

screenFuc();

function screenFuc() {

var topHeight = $(".chatBox-head").innerHeight();//聊天头部高度

//屏幕小于768px时候,布局change

var winWidth = $(window).innerWidth();

if (winWidth <= 768) {

var totalHeight = $(window).height(); //页面整体高度

$(".chatBox-info").css("height", totalHeight - topHeight);

var infoHeight = $(".chatBox-info").innerHeight();//聊天头部以下高度

//中间内容高度

$(".chatBox-content").css("height", infoHeight - 46);

$(".chatBox-content-demo").css("height", infoHeight - 46);

$(".chatBox-list").css("height", totalHeight - topHeight);

$(".chatBox-kuang").css("height", totalHeight - topHeight);

$(".div-textarea").css("width", winWidth - 106);

} else {

$(".chatBox-info").css("height", 495);

$(".chatBox-content").css("height", 448);

$(".chatBox-content-demo").css("height", 448);

$(".chatBox-list").css("height", 495);

$(".chatBox-kuang").css("height", 495);

$(".div-textarea").css("width", 260);

</script>

jQuery响应式聊天窗口界面

6、代码整体结构。

jQuery响应式聊天窗口界面

7、查看效果。

jQuery响应式聊天窗口界面

声明：本网站引用、摘录或转载内容仅供网站访问者交流或参考，不代表本站立场，如存在版权或非法内容，请联系站长删除，联系邮箱：site.kefu@qq.com。