我要投稿

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

bendan520 html

2023-08-21 0 697 百度已收录

进不了网站？换个网络试试！

之前做了一个h5版本的陌陌聊天移动端。这段时间我对之前的项目进行了整理，在原来版本的基础上进行了升级。这样我就有了目前的h5仿陌陌聊天高仿版html微信，添加微聊、通讯录、探索、我四个模块触摸左右滑动切换，聊天页面优化了多图预览、视频播放，长按菜单UI，聊天顶部的编辑器已经重新优化（新增更多表情），弹窗使用了自己开发的wcPop.js，具体看项目效果图！

HTML 代码片段：

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
        });
    }
});