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

});

}

});

效果图：

总结

以上所述是小编给大家介绍的HTML5高仿微信聊天、微信聊天表情|对话框|编辑器功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！