HTML5仿微信聊天界面、微信朋友圈实例
这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息、表情,发送的消息自动回滚定位到底部,另外可以对消息、图片、视频有不同的右键处理提示,还有打赏、占屏等操作。
html代码片段:
<!--BEGIN 打赏--> <div class="js_dialog" id="J_Dialog_dashang" style="display: none;"><!--<div class="weui-mask"></div>--><div class="weui-dialog"><i class="weui-xclose"></i><div class="weui-dialog__bd"><!-- //打赏模板区--><div class="ws__popup-template"><h2 class="hdTit">为喜欢的节目打赏</h2><div class="item flexbox"><input class="ipt-txt align-l flex1" type="text" name="dschooseProgram" placeholder="选择打赏节目" readonly /></div><div class="item item-area"><textarea class="describe" name="content" placeholder="输入打赏语,30字以内(选填)"></textarea></div><div class="item item-gift" id="J__chooseGift"><div class="gift flexbox selected" data-gift="001"><label class="txt"><span>豪车</span><em class="time">霸屏50秒</em></label><span class="amount">¥<em>12</em> <i class="chkbox"></i></span></div><div class="gift flexbox" data-gift="002"><label class="txt"><span>动人玫瑰</span><em class="time">霸屏20秒</em></label><span class="amount">¥<em>8</em> <i class="chkbox"></i></span></div></div></div></div><div class="weui-dialog__ft"><a href="javascript:;" class="weui-dialog__btn weui-dialog__btn_primary" style="background: #ff4400; border-radius: 4px; color: #fff;">支付 <span>¥<em class="moneyNum">12</em></span> 打赏</a></div></div> </div> <!--END 打赏-->
Javascript代码片段:
/* ——聊天编辑器区域 */ var $editor = $(".J__editorText"), editor = $editor[0]; var $face = $(".emotion-area dd img"); $face.on("click", function(e){if($(this).hasClass("face")){ //图像var img = $(this)[0].cloneNode(true);editor.focus();setTimeout(function(){var range, node;if(document.selection && document.selection.createRange){document.selection.createRange().pasteHTML(img);}else if(window.getSelection && window.getSelection().getRangeAt){range = window.getSelection().getRangeAt(0);range.insertNode(img);range.collapse(false);var sel = window.getSelection();sel.removeAllRanges();sel.addRange(range);}}, 16);}else if($(this).hasClass("del")){ //删除 editor.focus();range = window.getSelection().getRangeAt(0);range.collapse(false);var sel = window.getSelection();sel.removeAllRanges();sel.addRange(range);document.execCommand("delete");} });//...格式化编辑器包含标签 editor.addEventListener("focus", function(evt) {surrounds() }, true); editor.addEventListener("input", function(evt) {surrounds(); }, false); function surrounds() {setTimeout(function () { //chromevar sel = window.getSelection();var anchorNode = sel.anchorNode;if (!anchorNode) return;if (sel.anchorNode === editor ||(sel.anchorNode.nodeType === 3 && sel.anchorNode.parentNode === editor)) {var range = sel.getRangeAt(0);var p = document.createElement("p");range.surroundContents(p);range.selectNodeContents(p);range.insertNode(document.createElement("br")); //chromesel.collapse(p, 0);(function clearBr() {var elems = [].slice.call(editor.children);for (var i = 0, len = elems.length; i < len; i++) {var el = elems[i];if (el.tagName.toLowerCase() == "br") {editor.removeChild(el);}}elems.length = 0;})();}}, 0); }//...滚动到聊天内容底部 function scrollToBottom(){$('.ws__chatMsg-panel').animate({scrollTop: $("#J__chatMsgList").height()}, 300); }
运行效果:
转载于:https://www.cnblogs.com/xiaoyan2017/p/8370908.html
HTML5仿微信聊天界面、微信朋友圈实例相关推荐
- uni-app 关于微信小程序分享,app微信聊天界面和朋友圈分享
前端小白的uni-app艰难学习之路 微信小程序分享 实现微信小程序分享和app内微信分享 小程序分享很简单,我们通过button的open-type属性 <!-- #ifdef MP-WEIX ...
- php 仿微信朋友圈,HTML5仿微信聊天界面和朋友圈代码
这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...
- html5仿发送说说,适合发朋友圈可爱又有趣的说说 朋友圈必备秒赞文案
1. 盐于律己甜以待人 2. 太阳能维修月亮可更换星星不闪包退款 3. 下次绕过人间 4. 你如果爱着生活,生活一定比谁都清楚. 5. 公主殿下的任务呢就是天天开心 6. 我抓住夏天的尾巴啦 7. 在 ...
- h5聊天页面 jquery_HTML5仿微信聊天界面、微信朋友圈实例代码
这几天使用H5开发了一个仿微信聊天前端界面,尤其微信底部编辑器那块处理的很好,使用HTML5来开发,虽说功能效果并没有微信那么全,但是也相当不错了,可以发送消息.表情,发送的消息自动回滚定位到底部,另 ...
- uniapp可以封装组件嘛_uniapp聊天App实例|vue+uniapp仿微信界面|红包|朋友圈
一.功能阐述 今天给大家分享的是基于UniApp+Vue+Vuex+swiper+uniPop等技术开发的仿微信原生App聊天室|仿微信聊天界面实例项目uniapp-chatroom,实现了发送图文消 ...
- (仿微信Android)IM聊天+抢红包+直播+朋友圈源码发布了
(仿微信Android)IM聊天+抢红包+直播+朋友圈源码发布了 功能概览: IM聊天 单聊/群聊/聊天室--基于环信sdk 红包功能: 1.一对一红包 2.群红包(抢红包.答题红包.专属红包) 3. ...
- html5仿网页版微信聊天界面代码
2019独角兽企业重金招聘Python工程师标准>>> html5仿网页版微信聊天界面代码 转载于:https://my.oschina.net/u/1266171/blog/783 ...
- HTML5仿手机微信聊天界面
HTML5仿手机微信聊天界面,截图效果如下: 源代码如下: <!DOCTYPE html> <html> <head><meta charset=" ...
- html5 仿手机聊天,HTML5仿手机微信聊天界面
html> HTML5模拟微信聊天界面 /**重置标签默认样式*/ * { margin: 0; padding: 0; list-style: none; font-family: '微软雅黑 ...
- jquery 背景特效实现_html5实现的仿网页版微信聊天界面效果源码
码农那点事儿 关注我们,一起学习进步 这是一款基于html5实现的仿网页版微信聊天界面效果源码,可实现微信网页版聊天界面效果,在编辑框编辑文字之后按Ctrl+Enter键即可提交文字到聊天对话框上.整 ...
最新文章
- 「SAP技术」SAP MM MB5M报表不显示特殊库存数据
- [Mongodb]删除指定字段
- flink介绍:有界流和无界流
- Spring Boot 动态数据源(Spring 注解数据源)
- HDU - 4497 GCD and LCM
- 【接口技术】8086的IN和OUT指令
- Linux的实际操作:用户管理(删除用户userdel userdel -r)
- 线程安全的map_面试必问-几种线程安全的Map解析
- leetCode----day01---- 从排序数组中删除重复项
- 私藏几十款程序员必备效率工具:一次性都给你了!
- Web浏览器测试,怎么提取测试点 - web测试方法总结
- 美团iOS逆向工程分析
- 安全学习木马查杀打卡第二十一天
- python qt是什么_初识Python与Qt
- java拆分日期_java实现日期拆分的方法
- 怎么清理ug10注册表_最专业的软件卸载利器:不仅可卸载顽固软件,还能清理软件残留和注册表垃圾...
- python中计算梯度值
- matlab 矩阵维度必须一致,错误使用 /
- Ubuntu 22.04下载安装VMware Workstation Pro 17
- php 随机获取字母,深入PHP获取随机数字和字母的方法详解