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

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

html代码片段:




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

    JS代码片段:

    ");
    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高仿微信聊天、微信聊天表情|对话框|编辑器功能,希望对大家有所帮助。程序员遇到问题都会上(编程之家jb51.cc)查找问题解答方法!如果觉得站点还不错,随手转发给程序员朋友一下!

    版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

    相关推荐


    HTML5和CSS3实现3D展示商品信息的代码
    利用HTML5中的Canvas绘制笑脸的代码
    Html5剪切板功能的实现
    如何通过HTML5触摸事件实现移动端简易进度条
    Html5移动端获奖无缝滚动动画实现
    关于HTML5和CSS3实现机器猫的代码
    HTML5使用DOM进行自定义控制
    使用HTML5 Canvas绘制阴影效果的方法
    使用PHP和HTML5 FormData实现无刷新文件上传
    如何解决HTML5 虚拟键盘出现挡住输入框的问题
    HTML5中div和section以及article的区别分析
    html5和CSS 实现禁止IOS长按复制粘贴功能
    html5 touch事件实现触屏页面上下滑动
    canvas 模拟实现电子彩票刮刮乐的代码
    HTML5 Plus 实现手机APP拍照或相册选择图片上传的功能
    Android自定义环形LoadingView效果
    HTML5 canvas绘制五角星的方法
    html5使用html2canvas实现浏览器截图
    使用Canvas处理图片的方法介绍
    利用Canvas模仿百度贴吧客户端loading小球的方法