频道导航

HTML5高仿微信聊天、微信聊天表情、对话框、编辑器功能

2018-12-29 HTML5 脚本之家

前端之家收集整理的这篇文章主要介绍了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
});
}
});