HTML5如何實(shí)現(xiàn)微信聊天、微信聊天表情編輯器功能-創(chuàng)新互聯(lián)

這篇文章主要為大家展示了“HTML5如何實(shí)現(xiàn)微信聊天、微信聊天表情編輯器功能”，內(nèi)容簡(jiǎn)而易懂，條理清晰，希望能夠幫助大家解決疑惑，下面讓小編帶領(lǐng)大家一起研究并學(xué)習(xí)一下“HTML5如何實(shí)現(xiàn)微信聊天、微信聊天表情編輯器功能”這篇文章吧。

成都創(chuàng)新互聯(lián)公司專注于臨邑企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站建設(shè),成都做商城網(wǎng)站。臨邑網(wǎng)站建設(shè)公司,為臨邑等地區(qū)提供建站服務(wù)。全流程按需求定制設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，成都創(chuàng)新互聯(lián)公司專業(yè)和態(tài)度為您提供的服務(wù)

html代碼片段：

發(fā)送

照片

視頻

紅包

我的收藏

文件

總金額元紅包個(gè)數(shù)個(gè) 在線人數(shù)共186人￥0.00

Js代碼片段：

// ...長(zhǎng)按彈出菜單
$("#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("圖片長(zhǎng)按");
        menuTpl = "復(fù)制收藏另存為"+ _revoke +"刪除";
    }else if(that.hasClass("video")){
        console.log("視頻長(zhǎng)按");
        menuTpl = "另存為" + _revoke +"刪除";
    }else{
        console.log("文字長(zhǎng)按");
        menuTpl = "復(fù)制收藏" + _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如何實(shí)現(xiàn)微信聊天、微信聊天表情編輯器功能”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

當(dāng)前標(biāo)題：HTML5如何實(shí)現(xiàn)微信聊天、微信聊天表情編輯器功能-創(chuàng)新互聯(lián)
網(wǎng)頁(yè)路徑：http://weahome.cn/article/dhejgg.html