022360截图20181221095816291.png (94.63 KB, 下载次数: 332)
下载附件 保存到相册
6 年前 上传
025360截图20181221100205642.png (185.55 KB, 下载次数: 348)
<!-- …… 摇一摇加好友弹窗模板.End --> <div class="wcim__popup-tmpl"> <div id="J__popupTmpl-shakeFriends" style="display:none;"> <div class="wcim__popupTmpl tmpl-shakeFriends"> <div class="wcim__shakeFriends-panel"> <span class="btn-setShake J__shakeSetting"><i class="iconfont icon-shezhi c-9ea0a3 fs-45"></i></span> <div class="shake-ico"><i class="iconfont icon-yaoyiyao"></i></div> <div class="shake-loading"><div class="J__shakeLoading" style="display:none;"><img src="img/deng.gif" /><em>正在搜寻同一时刻摇晃手机的人</em></div></div> <!-- 信息 --> <div class="shake-box J__shakeInfoBox"> <!-- <div class="shake-info flexbox flex-alignc"> <img class="uimg" src="img/uimg/u__chat-img08.jpg" /> <div class="flex1"> <h2 class="name">大幂幂<i class="iconfont icon-nv c-ee4343"></i></h2> <label class="lbl clamp1">开森每一刻,每天都要美美哒!</label> </div> </div> --> </div> <div class="shake-item J__swtShakeItem"> <a class="active" href="javascript:;"><i class="iconfont icon-yonghu"></i><em>人</em></a> <a href="javascript:;"><i class="iconfont icon-qunzu"></i><em>群组</em></a> </div> </div> </div> </div> </div> <!-- …… 摇一摇加好友弹窗模板.End -->
006360截图20181221094923634.png (23.74 KB, 下载次数: 343)
007360截图20181221095016435.png (31.35 KB, 下载次数: 364)
// >>> 【摇一摇加好友核心模块】------------------------------------------ // 摇一摇加好友弹窗 $("#J__popScreen_shake").on("click", function () { var shakePopIdx = wcPop({ id: 'wcim_shake_fullscreen', skin: 'fullscreen', title: '摇一摇', content: $("#J__popupTmpl-shakeFriends").html(), position: 'right', xclose: true, style: 'background: #303030;', show: function(){ // 摇一摇功能 var _shake = new Shake({threshold: 15}); _shake.start(); window.addEventListener("shake", function(){ window.navigator.vibrate && navigator.vibrate(500); // console.log("触发摇一摇!"); $(".J__shakeInfoBox").html(""); $(".J__shakeLoading").fadeIn(300); // 消息模板 var shakeTpl = [ '<div class="shake-info flexbox flex-alignc">\ <img class="uimg" src="img/uimg/u__chat-img08.jpg" />\ <div class="flex1">\ <h2 class="name">大幂幂<i class="iconfont icon-nv c-f37e7d"></i></h2>\ <label class="lbl clamp1">开森每一刻,每天都要美美哒!</label>\ </div>\ </div>' ].join(""); setTimeout(function(){ $(".J__shakeLoading").fadeOut(300); $(".J__shakeInfoBox").html(shakeTpl); }, 1500); }, false); } }); }); // 切换摇一摇项目 $("body").on("click", ".J__swtShakeItem a", function(){ $(this).addClass("active").siblings().removeClass("active"); }); // 摇一摇设置 $("body").on("click", ".J__shakeSetting", function(){ wcPop({ skin: 'actionsheetMini', anim: 'footer', btns: [ { text: '<div class="flexbox flex-alignc"><span class="flex1">是否开启震动</span> <span class="rpr-30"><input class="cp__checkboxPX-switch" type="checkbox" checked /></span></div>' }, { text: '摇到的历史' }, ] }); });
// >>> 【按住说话核心模块】------------------------------------------ // ...按住说话 var _voiceObj = $(".J__wdtVoice"), eY1 = 0, eY2 = 0, eY3 = 0, isDrag = true; var voiceIdx; var difftime = 0; function initVoice(){ _voiceObj.on("touchstart", function(e){ difftime = new Date(); if(!isDrag) return; isDrag = false; eY1 = e.originalEvent.targetTouches[0].pageY; _voiceObj.text("松开 结束"); // 弹窗提示 voiceIdx = wcPop({ id: 'wdtVoice', skin: 'toast', content: '<div style="margin-top:-10px;"><i class="iconfont icon-yuyin" style="font-size:65px;"></i><div style="line-height:32px;">手指上滑,取消发送</div></div>', style: 'border-radius:6px;height: 160px; width:160px;', time: 10, opacity: 0, }); _voiceObj.on("touchmove", function (e) { e.preventDefault(); eY3 = e.originalEvent.targetTouches[0].pageY; if(eY1 - eY3 < 150){ _voiceObj.text("松开 结束"); }else{ _voiceObj.text("松开手指,取消发送"); // 弹窗提示 $("#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>'); } }); }); _voiceObj.on("touchend", function (e) { e.preventDefault(); eY2 = e.originalEvent.changedTouches[0].pageY; _voiceObj.text("按住 说话"); // 录音时间太短提示 if(new Date() - difftime < 1000){ // 弹窗提示 $("#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>'); } else{ if (eY1 - eY2 < 150) { // 发送成功 submitData(); console.log("测试数据"); } else { // 取消发送 console.log("cancel"); } } // 关闭弹窗 setTimeout(function(){ wcPop.close(voiceIdx); }, 500); isDrag = true; }); }
022360截图20181221095816291.png (94.63 KB, 下载次数: 325)
023360截图20181221095950859.png (95.19 KB, 下载次数: 354)
// ...获取语音时长 getVoiceTime(); function getVoiceTime(){ $("#J__chatMsgList li .audio").each(function () { var that = $(this), audio = that.find("audio")[0], duration; audio.load(); audio.oncanplay = function(){ duration = Math.ceil(audio.duration); if (duration == 'Infinity') { getVoiceTime(); } else { that.find(".time").text(duration + `''`); that.attr("data-time", duration); // 语音宽度% var percent = (duration / 60).toFixed(2) * 100 + 20 + '%'; that.css("width", percent); } } }); }
002360截图20181221094619690.png (45.68 KB, 下载次数: 364)
003360截图20181221094702001.png (46.36 KB, 下载次数: 343)
004360截图20181221094720201.png (44.92 KB, 下载次数: 355)
009360截图20181221095104377.png (66.32 KB, 下载次数: 345)
010360截图20181221095121562.png (25.34 KB, 下载次数: 360)
013360截图20181221095222185.png (20.2 KB, 下载次数: 331)
014360截图20181221095243962.png (20.48 KB, 下载次数: 345)
015360截图20181221095346473.png (67.64 KB, 下载次数: 352)
016360截图20181221095501306.png (73.93 KB, 下载次数: 342)
018360截图20181221095543817.png (124.27 KB, 下载次数: 352)
021360截图20181221095816291.png (98.07 KB, 下载次数: 358)
025360截图20181221100205642.png (185.55 KB, 下载次数: 350)
026360截图20181221100230225.png (288.77 KB, 下载次数: 367)
027360截图20181221095719913.png (65.4 KB, 下载次数: 356)
20180817002157557.jpg (9.81 KB, 下载次数: 349)
来源:即时通讯网 - 即时通讯开发者社区!
轻量级开源移动端即时通讯框架。
快速入门 / 性能 / 指南 / 提问
轻量级Web端即时通讯框架。
详细介绍 / 精编源码 / 手册教程
移动端实时音视频框架。
详细介绍 / 性能测试 / 安装体验
基于MobileIMSDK的移动IM系统。
详细介绍 / 产品截图 / 安装体验
一套产品级Web端IM系统。
详细介绍 / 产品截图 / 演示视频
Copyright © 2014-2024 即时通讯网 - 即时通讯开发者社区 / 版本 V4.4
苏州网际时代信息科技有限公司 (苏ICP备16005070号-1)
Processed in 0.122063 second(s), 35 queries , Gzip On.