// >>> 【摇一摇加好友核心模块】------------------------------------------

// 摇一摇加好友弹窗

$("#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: '摇到的历史' },

		]

	});

});

// ripple波纹效果

wcRipple({ elem: '.effect__ripple-fff', opacity: .15, speed: .5, bgColor: "#fff" });

wcRipple({ elem: '.effect__ripple', opacity: .15, speed: .5, bgColor: "#000" });



// 禁止长按弹出系统菜单

$("body").on("contextmenu", ".weChatIM__panel", function (e) {

	e.preventDefault();

});



// 顶部 “+” 菜单

$("#J__topbarAdd").on("click", function(e){

	var _points = [e.clientX, e.clientY];

	var contextMenuIdx = wcPop({

		skin: 'contextmenu', shade: true,shadeClose: true,opacity: 0,follow: _points,

		style: 'background:#3d3f4e; min-width:3.5rem;',

		btns: [

			{text: '<i class="iconfont icon-haoyou fs-40 mr-10"></i><span>添加好友</span>',style: 'color:#fff;', onTap(){

				wcPop.close(contextMenuIdx);

				// 添加好友

				var addfriendIdx = wcPop({

					id: 'wcim_fullscreen',

					skin: 'fullscreen',

					title: '添加好友',

					content: $("#J__popupTmpl-addFriends").html(),

					position: 'right',

					opacity: .1,

					xclose: true,

					style: 'background: #f2f1f6;'

				});

			}},

			{text: '<i class="iconfont icon-qunliao fs-40 mr-10"></i><span>发起群聊</span>',style: 'color:#fff;', onTap(){

				wcPop.close(contextMenuIdx);

				// 发起群聊

				var addfriendIdx = wcPop({

					id: 'wcim_fullscreen',

					skin: 'fullscreen',

					title: '发起群聊',

					content: $("#J__popupTmpl-launchGroupChat").html(),

					position: 'right',

					opacity: .1,

					xclose: true,

					style: 'background: #f2f1f6;'

				});

			}},

			{text: '<i class="iconfont icon-bangzhu fs-40 mr-10"></i><span>帮助与反馈</span>',style: 'color:#fff;',}

		]

	});

});

// ...获取语音时长

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);

			}

		}

	});

}

h5仿钉钉移动办公|仿钉钉聊天界面|钉钉html5模板

(function(doc, win) {

	var docEl = doc.documentElement,

		resizeEvt = "orientationchange" in window ? "orientationchange" : "resize",

		recalc = function() {

			var clientWidth = docEl.clientWidth;

			if (!clientWidth) return;

			if (clientWidth >= 750) {

				docEl.style.fontSize = "100px";

			} else {

				docEl.style.fontSize = 100 * (clientWidth / 750) + "px";

			}

		};



	if (!doc.addEventListener) return;

	recalc();

	win.addEventListener(resizeEvt, recalc, false);

})(document, window);

// ...打赏朋友功能

$(".J__chooseDs").on("click", function () {

	var dashangIdx = wcPop({

		id: 'wdtPopHb',

		title: '<a class="popui__tit-back wdt__ripple" href="javascript:;" onclick="wcPop.close();"><i class="iconfont icon-back"></i></a> <div class="popui__tit-text">打赏</div>',

		skin: 'fullscreen',

		content: $("#J__popupTmpl-Dashang").html(),

		position: 'right',

		style: 'background: #f3f3f3;',



		show: function(){

			$("body").on("click", "#J__chooseGift .gift", function () {

				$(this).addClass("selected").siblings().removeClass("selected");

			});

		}

	});

});



// ...拆开红包功能

$(".J__getRedPackets").on("click", function(){

	var getHbIdx = wcPop({

		id: 'wdtPopGetHb',

		skin: 'ios',

		content: $("#J__popupTmpl-getRedPacket").html(),

		xclose: true,

		style: 'background-color: #f3f3f3; width: 280px;',



		show: function () {

			$("body").on("click", ".J__btnGetRedPacket", function () {

				var that = $(this);

				that.addClass("active");

				setTimeout(function(){

					that.removeClass("active");

				}, 1000);

			});

		}

	});

});



// ...查看红包功能

$(".J__viewRedPackets").on("click", function(){

	var viewHbIdx = wcPop({

		id: 'wdtPopHb',

		title: '<a class="popui__tit-back wdt__ripple" href="javascript:;" onclick="wcPop.close();"><i class="iconfont icon-back"></i></a> <div class="popui__tit-text">红包详情</div>',

		skin: 'fullscreen',

		content: $("#J__popupTmpl-viewRedPacket").html(),

		position: 'top',

		style: 'background: #f3f3f3;'

	});

});

• 欢迎大家一起交流、学习  Q：282310962  wx：xy190310

html5微直播聊天项目实例|weLiveShow直播h5|移动端h5直播|html5直播模板