h5趣聊|仿微信群聊html5|h5仿微信語音/紅包
前些時間有使用html5開發(fā)過微直播項目，當(dāng)時里面有聊天模塊部分，這次就重新抽離出聊天模塊，開發(fā)了這個h5趣聊項目，功能效果比較類似微信聊天界面。
基于html5+css3+Zepto+swiper+wcPop+flex等技術(shù)混合開發(fā)，實(shí)現(xiàn)了發(fā)送消息、表情(動圖)，圖片、視頻預(yù)覽，添加好友/群聊，右鍵長按菜單。新增了語音模塊、地圖定位模塊。
項目中點(diǎn)擊的時候有Material波紋效果，利用js實(shí)現(xiàn)的插件，另外彈窗部分使用wcPop插件
wcRipple({ elem: '.effect__ripple-fff', opacity: .15, speed: .5, bgColor: "#fff" });
wcRipple({ elem: '.effect__ripple', opacity: .15, speed: .5, bgColor: "#000" });
搖一搖模塊使用的是shake.js插件實(shí)現(xiàn)功能
var _shake = new Shake({threshold: 15});
_shake.start();
window.addEventListener("shake", function(){
? ? ?window.navigator.vibrate && navigator.vibrate(500);
? ? ?//搖一搖邏輯部分...
}
// >>> 【搖一搖加好友核心模塊】------------------------------------------
// 搖一搖加好友彈窗
$("#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("觸發(fā)搖一搖！");
? ? ? ? ? ? ? ? $(".J__shakeInfoBox").html("");
? ? ? ? ? ? ? ? $(".J__shakeLoading").fadeIn(300);
? ? ? ? ? ? ? ? // 消息模板
? ? ? ? ? ? ? ? var shakeTpl = ...
? ? ? ? ? ? ? ? setTimeout(function(){
? ? ? ? ? ? ? ? ? ? $(".J__shakeLoading").fadeOut(300);
? ? ? ? ? ? ? ? ? ? $(".J__shakeInfoBox").html(shakeTpl);
? ? ? ? ? ? ? ? }, 1500);
? ? ? ? ? ? }, false);
? ? ? ? }
? ? });
});
另外按住語音效果則是使用touchstart、touchend等原生事件實(shí)現(xiàn)
// >>> 【按住說話核心模塊】------------------------------------------
// ...按住說話
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("松開 結(jié)束");
? ? ? ? // 彈窗提示
? ? ? ? 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;">手指上滑，取消發(fā)送</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("松開 結(jié)束");
? ? ? ? ? ? }else{
? ? ? ? ? ? ? ? _voiceObj.text("松開手指，取消發(fā)送");
? ? ? ? ? ? ? ? // 彈窗提示
? ? ? ? ? ? ? ? $("#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;">松開手指，取消發(fā)送</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) {
? ? ? ? ? ? ? ? // 發(fā)送成功
? ? ? ? ? ? ? ? submitData();
? ? ? ? ? ? ? ? console.log("測試數(shù)據(jù)");
? ? ? ? ? ? } else {
? ? ? ? ? ? ? ? // 取消發(fā)送
? ? ? ? ? ? ? ? console.log("cancel");
? ? ? ? ? ? }
? ? ? ? }
? ? ? ? // 關(guān)閉彈窗
? ? ? ? setTimeout(function(){
? ? ? ? ? ? wcPop.close(voiceIdx);
? ? ? ? }, 500);
? ? ? ? isDrag = true;
? ? });
}
由于不能粘貼過多代碼，只能作些上述簡單介紹了，希望大家會喜歡！
