您现在的位置是：网站首页> 编程资料编程资料

HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能html5实现点击弹出图片功能html5 录制mp3音频支持采样率和比特率设置html5表单的required属性使用html5调用摄像头实例代码HTML5页面音频自动播放的实现方式Html5大屏数据可视化开发的实现html实现弹窗的实例HTML5来实现本地文件读取和写入的实现方法HTML 罗盘式时钟的实现HTML5简单实现添加背景音乐的几种方法

2021-08-31 981人已围观

简介之前做过一版h5微信聊天移动端的项目，今天小编抽空给大家分享HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能，需要的朋友参考下吧

之前做过一版h5微信聊天移动端，这段时间闲来无事就整理了下之前项目，又重新在原先的那版基础上升级了下，如是就有了现在的h5仿微信聊天高仿版，新增了微聊、通讯录、探索、我四个模块左右触摸滑屏切换，聊天页面优化了多图预览、视频播放，长按菜单UI，聊天底部编辑器重新优化整理(新增多表情)，弹窗则用到了自己开发的wcPop.js，具体看项目效果图吧！

html代码片段：


照片
视频
红包
我的收藏
文件
总金额元
红包个数个
在线人数共186人
￥0.00

Js代码片段：

 // ...长按弹出菜单 $("#J__chatMsgList").on("longTap", "li .msg", function(e){ var that = $(this), menuTpl, menuNode = $("
"); that.addClass("taped"); that.parents("li").siblings().find(".msg").removeClass("taped"); var isRevoke = that.parents("li").hasClass("me"); var _revoke = isRevoke ? "撤回" : ""; if(that.hasClass("picture")){ console.log("图片长按"); menuTpl = "复制收藏另存为"+ _revoke +"删除
"; }else if(that.hasClass("video")){ console.log("视频长按"); menuTpl = "另存为" + _revoke +"删除
"; }else{ console.log("文字长按"); menuTpl = "复制收藏" + _revoke +"删除
"; } if(!$(".wc__chatTapMenu").length){ $(".wc__chatMsg-panel").append(menuNode.html(menuTpl)); autoPos(); }else{ $(".wc__chatTapMenu").hide().html(menuTpl).fadeIn(250); autoPos(); } function autoPos(){ console.log(that.position().top) var _other = that.parents("li").hasClass("others"); $(".wc__chatTapMenu").css({ position: "absolute", left: that.position().left + parseInt(that.css("marginLeft")) + (_other ? 0 : that.outerWidth() - $(".wc__chatTapMenu").outerWidth()), top: that.position().top - $(".wc__chatTapMenu").outerHeight() - 8 }); } });