今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是使用自己开发的wcPop.js插件;编辑器部分由原先的单一表情新增为动图表情,实现了消息、表情发送 | 大图、视频效果预览 | 仿微信红包、打赏等微交互功能。

案例截图:

// ...滚动聊天区底部
function wchat_ToBottom(){//$(".wc__chatMsg-panel").animate({scrollTop: $("#J__chatMsgList").height()}, 0);$(".wc__slimscroll2").slimscroll({scrollBy: $("#J__chatMsgList").height(),height: 'auto'});
}// ...表情、选择区切换
$(".wc__editor-panel").on("click", ".btn", function(){var that = $(this);$(".wc__choose-panel").show();if (that.hasClass("btn-emotion")) {$(".wc__choose-panel .wrap-emotion").show();$(".wc__choose-panel .wrap-choose").hide();// 初始化swiper表情!emotionSwiper && $("#J__emotionFootTab ul li.cur").trigger("click");} else if (that.hasClass("btn-choose")) {$(".wc__choose-panel .wrap-emotion").hide();$(".wc__choose-panel .wrap-choose").show();}wchat_ToBottom();
});// ...处理编辑器信息
// 格式化编辑器包含标签
_editor.addEventListener("click", function () {//$(".wc__choose-panel").hide();
}, true);
_editor.addEventListener("focus", function(){surrounds();
}, true);
_editor.addEventListener("input", function(){surrounds();
}, false);// 发送信息
var $chatMsgList = $("#J__chatMsgList");
function isEmpty(){var html = $editor.html();html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n");html = html.replace(/<[^img].*?>/ig, "");html = html.replace(/&nbsp;/ig, "");return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == "";
}
$(".J__wchatSubmit").on("click", function(){// 判断内容是否为空if(isEmpty()) return;var html = $editor.html();var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g;html = html.replace(reg, "<a href='$1$2'>$1$2</a>");var msgTpl = ['<li class="me">\<div class="content">\<p class="author">Nice奶思</p>\<div class="msg">'+ html +'</div>\</div>\<a class="avatar" href="微聊(好友主页).html"><img src="img/uimg/u__chat-img14.jpg" /></a>\</li>'].join("");$chatMsgList.append(msgTpl);// 清空聊天框并获取焦点(处理输入法和表情 - 聚焦)if(!$(".wc__choose-panel").is(":hidden")){$editor.html("");}else{$editor.html("").focus().trigger("click");}wchat_ToBottom();
});

转载于:https://www.cnblogs.com/xiaoyan2017/p/9266179.html

h5移动端聊天室|仿微信界面聊天室|h5多人聊天室相关推荐

  1. flutter 微信语言选择_Flutter/dart聊天实例|仿微信界面|红包|朋友圈

    FlutterChatroom项目是基于flutter+dart+image_picker等技术实现的仿微信app聊天室实战项目. 一.技术框架编码/技术:Vscode + Flutter 1.12. ...

  2. flutter图片聊天泡泡_Flutter/dart聊天实例|仿微信界面|红包|朋友圈

    FlutterChatroom项目是基于flutter+dart+image_picker等技术实现的仿微信app聊天室实战项目. 一.技术框架编码/技术:Vscode + Flutter 1.12. ...

  3. imchat视频聊天室 linux,基于Nuxt+Vant聊天模板|nuxt.js仿微信界面|红包|朋友圈

    项目说明 > [NuxtIMChat项目]是基于vue.js+nuxt.js+vuex+webpack+vant-ui开发的仿微信聊天实例.实现了消息发送.图片/视频预览.下拉刷新/长按弹窗.朋 ...

  4. vue2.0聊天室vue-chatRoom|仿微信界面vue+vuex+vueRouter

    Vue2.0+Vuex+VueRouter仿微信界面聊天室|仿微信聊天窗口|仿微信群聊 基于vue2.0+vuex+webpack2.0+es6+wcPop等技术开发的仿微信聊天室vue-weChat ...

  5. uniapp可以封装组件嘛_uniapp聊天App实例|vue+uniapp仿微信界面|红包|朋友圈

    一.功能阐述 今天给大家分享的是基于UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消 ...

  6. html语音对话,HTML5 语音聊天 IM|仿微信语音界面|摇一摇效果

    介绍 之前由于项目需求有开发过一款简单的聊天项目,不过功能及UI比较简单,最近又重新在原先的基础上进行了一次大的重构,开发了这款仿微信界面聊天IM系统--趣聊weChatIM. 技术点 运用h5+cs ...

  7. react仿微信web版聊天室|仿微信客户端react版

    基于react+react-dom+react-router-dom+redux+react-redux+webpack+nodeJs等技术混合开发的手机端仿微信界面聊天室--reactChatRoo ...

  8. IM即时通信多房间聊天室仿微信聊天(二)

    IM即时通信多房间聊天室仿微信聊天(服务器自定义处理客户端消息) 在IM即时通信多房间聊天室仿微信聊天(一)中我们已经搭建了基本的通信架构,接下来重点就是如何在自己的后台接收并处理客户端用户的消息了 ...

  9. IM即时通信多房间聊天室仿微信聊天(四)

    聊天记录的保存和展示 IM即时通信多房间聊天室仿微信聊天(一) IM即时通信多房间聊天室仿微信聊天(二) IM即时通信多房间聊天室仿微信聊天(三) 聊天消息的保存我们直接在服务端接收到客户端发送的消息 ...

最新文章

  1. 软件性能测试主要看什么指标
  2. Python2和Python3除法差别
  3. ArcGIS.Server.9.3和ArcGIS API for JavaScript实现Identify功能(六)
  4. POJ2942 Knights of the Round Table 点双连通分量 二分图判定
  5. 计算机C语言知识点免费下载,全国计算机二级C语言知识点
  6. 使用maven时报错Dynamic Web Module 3.1 requires Java 1.7 or newe
  7. 2020.NET开发者大会大会线上同步直播,以及参会秘籍
  8. 让 .Net 更方便的导入导出 Excel
  9. 9050 端口 linux 进程,windows和linux查看端口占用情况
  10. 工频干扰频谱测量_EMC预认证测量的哀与愁
  11. Java中的Random()函数 【转载】
  12. 常用的pcb设计软件有哪些
  13. wps底板颜色怎么去掉_wps怎么把复制网页的灰色阴影去掉 底纹去掉方法
  14. STK9 Object Browser灰色无法操作
  15. html怎么导入桌面上的图片,html怎么导入图片
  16. 摄像头M-JPEG 格式分析
  17. GDrive首次现身!
  18. 【错误解决】System.NotSupportedException:“LINQ to Entities does not recognize the method
  19. JS实现键盘移动光标
  20. vue实现页面点击页面滚动-禁止鼠标滑轮滚动页面

热门文章

  1. Oracle编码格式为US7ASCII中文乱码如何解决
  2. 一个完整的微型计算机硬盘系统应由,2017年4月自学考试计算机应用基础真题
  3. python调用浏览器
  4. 前端开发工程师面试题集锦(一)
  5. 皮肤下载php,phpstrom好看的皮肤
  6. 博途PLC 1200/1500PLC轴控功能块Servo_Axis(PN总线轴)
  7. 基于51单片机防火防盗 LCD 1602屏+烟雾+温度+红外
  8. 2022年中国电力数字化产业研究报告 附下载
  9. 考研计算器(fx-991CN x 中文版CASIO)求逆
  10. DNS解析详细过程(转载)