之前有开发过一个h5微直播项目,当时里面也用到过聊天模块部分,今天就在之前聊天部分的基础上重新抽离模块,开发了这个h5趣聊项目,功能效果比较类似微信聊天界面。采用html5+css3+Zepto+swiper+wcPop+flex等技术融合开发,实现了发送消息、表情(动图),图片、视频预览,添加好友/群聊,右键长按菜单。另外新增了语音模块、地图定位模块。整体功能界面效果比较接近微信聊天。

项目运行效果图:

  1. // ripple波纹效果
  2. wcRipple({ elem: '.effect__ripple-fff', opacity: .15, speed: .5, bgColor: "#fff" });
  3. wcRipple({ elem: '.effect__ripple', opacity: .15, speed: .5, bgColor: "#000" });
  4.  
  5. // 禁止长按弹出系统菜单
  6. $("body").on("contextmenu", ".weChatIM__panel", function (e) {
  7. e.preventDefault();
  8. });
  9.  
  10. // 顶部 “+” 菜单
  11. $("#J__topbarAdd").on("click", function(e){
  12. var _points = [e.clientX, e.clientY];
  13. var contextMenuIdx = wcPop({
  14. skin: 'contextmenu', shade: true,shadeClose: true,opacity: 0,follow: _points,
  15. style: 'background:#3d3f4e; min-width:3.5rem;',
  16. btns: [
  17. {text: '<i class="iconfont icon-haoyou fs-40 mr-10"></i><span>添加好友</span>',style: 'color:#fff;', onTap(){
  18. wcPop.close(contextMenuIdx);
  19. // 添加好友
  20. var addfriendIdx = wcPop({
  21. id: 'wcim_fullscreen',
  22. skin: 'fullscreen',
  23. title: '添加好友',
  24. content: $("#J__popupTmpl-addFriends").html(),
  25. position: 'right',
  26. opacity: .1,
  27. xclose: true,
  28. style: 'background: #f2f1f6;'
  29. });
  30. }},
  31. {text: '<i class="iconfont icon-qunliao fs-40 mr-10"></i><span>发起群聊</span>',style: 'color:#fff;', onTap(){
  32. wcPop.close(contextMenuIdx);
  33. // 发起群聊
  34. var addfriendIdx = wcPop({
  35. id: 'wcim_fullscreen',
  36. skin: 'fullscreen',
  37. title: '发起群聊',
  38. content: $("#J__popupTmpl-launchGroupChat").html(),
  39. position: 'right',
  40. opacity: .1,
  41. xclose: true,
  42. style: 'background: #f2f1f6;'
  43. });
  44. }},
  45. {text: '<i class="iconfont icon-bangzhu fs-40 mr-10"></i><span>帮助与反馈</span>',style: 'color:#fff;',}
  46. ]
  47. });
  48. });

◆ 摇一摇模块弹窗模板:

  1. <!-- …… 摇一摇加好友弹窗模板.End -->
  2. <div class="wcim__popup-tmpl">
  3. <div id="J__popupTmpl-shakeFriends" style="display:none;">
  4. <div class="wcim__popupTmpl tmpl-shakeFriends">
  5. <div class="wcim__shakeFriends-panel">
  6. <span class="btn-setShake J__shakeSetting"><i class="iconfont icon-shezhi c-9ea0a3 fs-45"></i></span>
  7.  
  8. <div class="shake-ico"><i class="iconfont icon-yaoyiyao"></i></div>
  9. <div class="shake-loading"><div class="J__shakeLoading" style="display:none;"><img src="img/deng.gif" /><em>正在搜寻同一时刻摇晃手机的人</em></div></div>
  10. <!-- 信息 -->
  11. <div class="shake-box J__shakeInfoBox">
  12. <!-- <div class="shake-info flexbox flex-alignc">
  13. <img class="uimg" src="img/uimg/u__chat-img08.jpg" />
  14. <div class="flex1">
  15. <h2 class="name">大幂幂<i class="iconfont icon-nv c-ee4343"></i></h2>
  16. <label class="lbl clamp1">开森每一刻,每天都要美美哒!</label>
  17. </div>
  18. </div> -->
  19. </div>
  20. <div class="shake-item J__swtShakeItem">
  21. <a class="active" href="javascript:;"><i class="iconfont icon-yonghu"></i><em></em></a>
  22. <a href="javascript:;"><i class="iconfont icon-qunzu"></i><em>群组</em></a>
  23. </div>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. <!-- …… 摇一摇加好友弹窗模板.End -->
  1. // >>> 【摇一摇加好友核心模块】------------------------------------------
  2. // 摇一摇加好友弹窗
  3. $("#J__popScreen_shake").on("click", function () {
  4. var shakePopIdx = wcPop({
  5. id: 'wcim_shake_fullscreen',
  6. skin: 'fullscreen',
  7. title: '摇一摇',
  8. content: $("#J__popupTmpl-shakeFriends").html(),
  9. position: 'right',
  10. xclose: true,
  11. style: 'background: #303030;',
  12. show: function(){
  13. // 摇一摇功能
  14. var _shake = new Shake({threshold: 15});
  15. _shake.start();
  16. window.addEventListener("shake", function(){
  17. window.navigator.vibrate && navigator.vibrate(500);
  18. // console.log("触发摇一摇!");
  19.  
  20. $(".J__shakeInfoBox").html("");
  21. $(".J__shakeLoading").fadeIn(300);
  22. // 消息模板
  23. var shakeTpl = [
  24. '<div class="shake-info flexbox flex-alignc">\
  25. <img class="uimg" src="img/uimg/u__chat-img08.jpg" />\
  26. <div class="flex1">\
  27. <h2 class="name">大幂幂<i class="iconfont icon-nv c-f37e7d"></i></h2>\
  28. <label class="lbl clamp1">开森每一刻,每天都要美美哒!</label>\
  29. </div>\
  30. </div>'
  31. ].join("");
  32. setTimeout(function(){
  33. $(".J__shakeLoading").fadeOut(300);
  34. $(".J__shakeInfoBox").html(shakeTpl);
  35. }, 1500);
  36. }, false);
  37. }
  38. });
  39. });
  40. // 切换摇一摇项目
  41. $("body").on("click", ".J__swtShakeItem a", function(){
  42. $(this).addClass("active").siblings().removeClass("active");
  43. });
  44. // 摇一摇设置
  45. $("body").on("click", ".J__shakeSetting", function(){
  46. wcPop({
  47. skin: 'actionsheetMini',
  48. anim: 'footer',
  49. btns: [
  50. { text: '<div class="flexbox flex-alignc"><span class="flex1">是否开启震动</span> <span class="rpr-30"><input class="cp__checkboxPX-switch" type="checkbox" checked /></span></div>' },
  51. { text: '摇到的历史' },
  52. ]
  53. });
  54. });

◆ h5+js仿微信语音弹窗效果模块:

  1. // >>> 【按住说话核心模块】------------------------------------------
  2. // ...按住说话
  3. var _voiceObj = $(".J__wdtVoice"), eY1 = 0, eY2 = 0, eY3 = 0, isDrag = true;
  4. var voiceIdx;
  5. var difftime = 0;
  6. function initVoice(){
  7. _voiceObj.on("touchstart", function(e){
  8. difftime = new Date();
  9. if(!isDrag) return;
  10. isDrag = false;
  11. eY1 = e.originalEvent.targetTouches[0].pageY;
  12. _voiceObj.text("松开 结束");
  13.  
  14. // 弹窗提示
  15. voiceIdx = wcPop({
  16. id: 'wdtVoice',
  17. skin: 'toast',
  18. content: '<div style="margin-top:-10px;"><i class="iconfont icon-yuyin" style="font-size:65px;"></i><div style="line-height:32px;">手指上滑,取消发送</div></div>',
  19. style: 'border-radius:6px;height: 160px; width:160px;',
  20. time: 10,
  21. opacity: 0,
  22. });
  23.  
  24. _voiceObj.on("touchmove", function (e) {
  25. e.preventDefault();
  26.  
  27. eY3 = e.originalEvent.targetTouches[0].pageY;
  28. if(eY1 - eY3 < 150){
  29. _voiceObj.text("松开 结束");
  30. }else{
  31. _voiceObj.text("松开手指,取消发送");
  32.  
  33. // 弹窗提示
  34. $("#wdtVoice .popui__panel-cnt").html('<div style="margin-top:-10px;"><i class="iconfont icon-quxiao" style="font-size:65px;"></i><div style="background:#c53838; border-radius:3px; line-height:32px;">松开手指,取消发送</div></div>');
  35. }
  36. });
  37. });
  38. _voiceObj.on("touchend", function (e) {
  39. e.preventDefault();
  40. eY2 = e.originalEvent.changedTouches[0].pageY;
  41. _voiceObj.text("按住 说话");
  42.  
  43. // 录音时间太短提示
  44. if(new Date() - difftime < 1000){
  45. // 弹窗提示
  46. $("#wdtVoice .popui__panel-cnt").html('<div style="margin-top:-10px;"><i class="iconfont icon-gantan" style="font-size:65px;"></i><div style="line-height:32px;">录音时间太短!</div></div>');
  47. } else{
  48. if (eY1 - eY2 < 150) {
  49. // 发送成功
  50. submitData();
  51. console.log("测试数据");
  52. } else {
  53. // 取消发送
  54. console.log("cancel");
  55. }
  56. }
  57. // 关闭弹窗
  58. setTimeout(function(){
  59. wcPop.close(voiceIdx);
  60. }, 500);
  61. isDrag = true;
  62. });
  63. }

◆ js获取语音时长:

  1. // ...获取语音时长
  2. getVoiceTime();
  3. function getVoiceTime(){
  4. $("#J__chatMsgList li .audio").each(function () {
  5. var that = $(this), audio = that.find("audio")[0], duration;
  6. audio.load();
  7. audio.oncanplay = function(){
  8. duration = Math.ceil(audio.duration);
  9. if (duration == 'Infinity') {
  10. getVoiceTime();
  11. } else {
  12. that.find(".time").text(duration + `''`);
  13. that.attr("data-time", duration);
  14. // 语音宽度%
  15. var percent = (duration / 60).toFixed(2) * 100 + 20 + '%';
  16. that.css("width", percent);
  17. }
  18. }
  19. });
  20. }

html5聊天案例|趣聊h5|仿微信界面聊天|红包|语音聊天|地图的更多相关文章

  1. H5仿微信界面教程(一)

    前言 先来张图,仿微信界面,界面如下,并不完全一模一样,只能说有些类似,希望大家见谅. 1 用到的知识点 jQuery WeUI 是WeUI的一个jQuery实现版本,除了实现了官方插件之外,它还提供 ...

  2. react聊天室|react+redux仿微信聊天IM实例|react仿微信界面

    一.项目概况 基于react+react-dom+react-router-dom+redux+react-redux+webpack2.0+react-photoswipe+swiper等技术混合开 ...

  3. web版仿微信聊天界面|h5仿微信电脑端案例开发

    前几天开发了一款手机端h5仿微信聊天,人唯有不停学习才能进步,这段时间倒腾着整理了下之前项目,又重新在原先的那版基础上开发了一款仿微信聊天电脑端web版本,聊天页面又重新优化了多图预览.视频播放,右键 ...

  4. h5移动端聊天室|仿微信界面聊天室|h5多人聊天室

    今年的FIFA世界杯甚是精彩,最近兴致高涨就利用HTML5开发了一个手机端仿微信界面聊天室,该h5聊天室采用750px全新伸缩flex布局,以及使用rem响应式配合fontsize.js,页面弹窗则是 ...

  5. h5仿微信聊天(高仿版)、微信聊天表情|对话框|编辑器

    之前做过一版h5微信聊天移动端,这段时间闲来无事就整理了下之前项目,又重新在原先的那版基础上升级了下,如是就有了现在的h5仿微信聊天高仿版,新增了微聊.通讯录.探索.我四个模块 左右触摸滑屏切换,聊天 ...

  6. Vue3.0聊天室|vue3+vant3仿微信聊天实例|vue3.x仿微信app界面

    一.项目简介 基于Vue3.0+Vant3.x+Vuex4.x+Vue-router4+V3Popup等技术开发实现的仿微信手机App聊天实例项目Vue3-Chatroom.实现了发送图文表情消息/g ...

  7. h5仿微信、支付宝数字键盘|微信支付键盘|支付宝付款键盘

    html5仿微信支付数字键盘|仿支付宝键盘|h5仿微信密码输入键盘|自定义数字键盘 很早之前由于项目需求,就有开发过一个h5仿微信支付键盘,这几天就把之前的数字键盘模块独立出来,重新整理开发成demo ...

  8. Android ActionBar仿微信界面

    ActionBar仿微信界面 1.学习了别人的两篇关于ActionBar博客,在结合别人的文章来仿造一下微信的界面: 思路如下:1).利用ActionBar生成界面的头部,在用ActionBar的Ac ...

  9. html5的audio实现高仿微信语音播放效果

    效果图 前台大体呈现效果图如下: 点击就可以播放mp3格式的录音.点击另外一个录音,当前录音停止! 思路 关于播放动画,这个很简单,我们可以用css3的逐帧动画来实现.关于逐帧动画,我之前的文章也写过 ...

随机推荐

  1. 2018.08.19 NOIP模拟 number(类数位dp)

    Number 题目背景 SOURCE:NOIP2015-SHY-10 题目描述 如果一个数能够表示成两两不同的 3 的幂次的和,就说这个数是好的. 比如 13 是好的,因为 13 = 9 + 3 + ...

  2. 2018.07.30 cogs2632. [HZOI 2016] 数列操作d(线段树)

    传送门 线段树基本操作 区间加等差数列,维护区间和. 对于每个区间维护等差数列首项和公差,易证这两个东西都是可合并的,然后使用小学奥数的知识就可以切掉这题. 代码: #include<bits/ ...

  3. 将IP地址转化为整数

    $ip = 'IP地址';echo $intip = sprintf('%u',ip2long($ip)); //转换为无符号整型echo long2ip($intip);//将整型转换为ip

  4. 第四章 代词(Les pronoms )

    ★人称代词 .主语人称代词 第一人称和第二人称属纯人称代词,只能代人不能代物;第三人称可代人,亦可代物.如: La Terre est ronde. Elle tourne autour du Sol ...

  5. 12) maven-compiler-plugin

    The Compiler Plugin is used to compile the sources of your project. At present the default source se ...

  6. 点云库PCL学习

    1. 点云的提取 点云的获取:RGBD获取 点云的获取:图像匹配获取(通过摄影测量提取点云数据) 点云的获取:三维激光扫描仪 2. PCL简介 PCL是Point Cloud Library的简称,是 ...

  7. 如何手动编译java文件

    1,在编辑框中,将目录切至java文件所在的地址 如图 2,开始编译java文件 用命令javac 编译目标java文件,文件需带后缀名 ; 用java 执行class, 此时class文件无需带后缀 ...

  8. OpenGL中的矩阵相乘

    OpenGL中的矩阵相乘 1, 在OpenGL中所有的视图变换,模型变换 都是4×4矩阵,每个后续的glMultiMatrix*(N),或者变换函数,glTranslate* (),glRotate* ...

  9. 团队项目(第四周之一)—GG队

    Alpha认领任务: 叶尚文:对应键盘监听结果的动画以及计算 于泽浩:制作背景gif图,并保证能在程序中循环播放 龙剑初:项目进度跟进及博客更新 杜婷萱:把图片结合起来,设置云朵透明度的变化 蔡晓晴: ...

  10. CAS实战の遇到的问题

    1.客户端启动报错,报错信息如下: 严重: Exception starting filter CAS Single Sign Out Filter java.lang.IllegalArgument ...