html5直播实例|h5仿陌陌、仿火山小视频

这段时间直播、小视频比较火，于是空余时间利用h5开发的仿陌陌、抖音、火山小视频项目，使用到了html5+css3+jQuery+iscroll+swiper+wlsPop+wcMsgTips等技术架构开发，界面功能效果挺不错哒！！！

// 礼物提醒 function giveGifGift(){ var rndObj = [ { giftName: '福到了', giftImg: 'img/gift/gif/gift-gifimg001.gif' }, { giftName: '发红包喽', giftImg: 'img/gift/gif/gift-gifimg002.gif' }, { giftName: '大白变超人', giftImg: 'img/gift/gif/gift-gifimg003.gif' }, { giftName: '浪漫的热气球', giftImg: 'img/gift/gif/gift-gifimg004.gif' }, { giftName: '超炫法拉利', giftImg: 'img/gift/gif/gift-gifimg005.gif' }, { giftName: '大白鲨', giftImg: 'img/gift/gif/gift-gifimg006.gif' }, { giftName: '魔法城堡', giftImg: 'img/gift/gif/gift-gifimg007.gif' } ]; var len = rndObj.length, num = Math.floor(Math.random() * len); wcTips({ selector: 'body', id: 'wcTips3', content: '<div class="wls__gift-fullscreen"><div class="gifGift"><img class="gifimg" src="' + rndObj[num].giftImg + '" /></div></div>', shade: true, anim: 'zoomInDown', time: 10 }); } /* 编辑器函数----------------------------------------------------*/ // 滚动到聊天信息底部 function rollMsg__toBottom(){ $(".wls__rollMsgPanel").animate({scrollTop: $("#J__chatMsgList").height()}, 300); } rollMsg__toBottom(); // >>>表情、选择区切换 $(".wls__editorPanel").on("click", ".btn", function () { var that = $(this); $(".wls__choose-panel").show(); var editorFixBottom = $(".wls__choose-panel").outerHeight(); if(that.hasClass("btn-face")){ $(".J__wrapEmotion").show(); $(".J__wrapChoose").hide(); // 初始化swiper表情 !emotionSwiper && $("#J__emotionFootTab ul li.cur").trigger("click"); }else if(that.hasClass("btn-choose")){ $(".J__wrapEmotion").hide(); $(".J__wrapChoose").show(); } // 重置编辑器位置 $(".wls__editor-panel").css({ "position": "absolute", "bottom": editorFixBottom }); }); // >>>编辑器处理函数 var $chatMsgList = $("#J__chatMsgList"); var $editor = $(".J__wlsEditor"), _editor = $editor[0]; // 定义最后光标位置 var _lastRange = null, _sel = window.getSelection && window.getSelection(); var _rng = { getRange: function () { if (_sel && _sel.rangeCount > 0) { return _sel.getRangeAt(0); } }, addRange: function () { if (_lastRange) { _sel.removeAllRanges(); _sel.addRange(_lastRange); } } } // 表情处理 $("#J__swiperEmotion").on("click", ".face-list span img", function () { var that = $(this), range; if (that.hasClass("face")) { //表情 var img = that[0].cloneNode(true); if (!_editor.childNodes.length) { _editor.focus(); } _editor.blur(); //输入表情时禁止输入法 setTimeout(function () { if (document.selection && document.selection.createRange) { document.selection.createRange().pasteHTML(img); } else if (window.getSelection && window.getSelection().getRangeAt) { range = _rng.getRange(); range.insertNode(img); range.collapse(false); _lastRange = range; //记录当前光标位置 (否则光标会跑到表情前面) _rng.addRange(); } }, 10); } else if (that.hasClass("del")) { // _editor.focus(); _editor.blur(); //输入表情时禁止输入法 setTimeout(function () { range = _rng.getRange(); range.collapse(false); document.execCommand("delete"); _lastRange = range; _rng.addRange(); }, 10); } }); // 发送信息 function isEmpty() { var html = $editor.html(); html = html.replace(/<br[\s\/]{0,2}>/ig, "\r\n"); html = html.replace(/<[^img].*?>/ig, ""); html = html.replace(/ /ig, ""); return html.replace(/\r\n|\n|\r/, "").replace(/(?:^[ \t\n\r]+)|(?:[ \t\n\r]+$)/g, "") == ""; } $(".J__wchatSubmit").on("click", function () { // 判断内容是否为空 if (isEmpty()) return; ... }); // 发送快捷模板信息 var fastMsgTplIdx = null; $(".J__fastMsgTpl").on("click", "ul li.more", function () { fastMsgTplIdx = wcPop({ id: 'wcFastMsg', skin: 'android', title: '给主播请个安吧', content: '<div class="wls__fastMsgTpl J__fastMsgTpl"><ul class="clearfix"><li class="item">凉了</li><li class="item">聊天要有礼貌哟！</li><li class="item">守塔</li><li class="item">求签名</li><li class="item">老司机带带我</li><li class="item">确认过眼神，我遇上对的人</li><li class="item">这个人说话很好听</li><li class="item">慌的一批</li><li class="item">家里有矿啊</li><li class="item">被安排的明明白白</li></ul></div>', xclose: true }); }); /* 选择区函数----------------------------------------------------*/ // 打赏 $(".J__fnDs").on("click", function () { var dashangIdx = wcPop({ skin: 'android', title: '<div style="color:#ffe9be;text-align:center;">打赏</div>', content: $("#J__popupTmpl-Dashang").html(), style: 'background:#e2554b;width:90%;max-width:640px;', xclose: true, show: function(){ $("body").on("click", "#J__donateList dd", function () { $(this).addClass("cur").siblings().removeClass("cur"); }); } }); }); // 发红包 $(".J__fnHb").on("click", function () { var hongbaoIdx = wcPop({ skin: 'android', title: '<div style="color:#ffe9be;text-align:center;">发红包</div>', content: $("#J__popupTmpl-Hongbao").html(), style: 'background:#e2554b;width:90%;max-width:640px;', xclose: true }); }); // 发私信 $(".J__fnSx").on("click", function () { var sixinIdx = wcPop({ skin: 'android', title: '提示', content: '<div style="font-size:16px;">给 <em class="c-23ade5">Salon肥仔</em> 发送私信<div class="flexbox flex-alignc rmt-25"><input class="flex1" type="text" style="border: 0; border-bottom:1px solid #23ade5; padding:.1rem 0;" /></div></div>', style: 'width:90%;', btns: [ { text: '取消', onTap() { wcPop.close(sixinIdx); } }, { text: '发送', style: 'color: #23ade5;', onTap() { ... } } ] }); }); /* 底部toolbar函数----------------------------------------------------*/ // 送一朵花 $(".J__toolbtnSH").on("click", function(){ var _toolIdx03 = wcPop({ skin: 'ios', title: '<div style="font-size:18px;text-align:left;">提示</div>', content: '<div style="text-align:left;padding-bottom:.25rem;">需要支付1微播币，确认支付吗？<div class="flexbox flex-alignc rmt-25"><input class="cp__checkboxPX-switch" type="checkbox" /><em class="flex1 rml-10 c-b9bbbc">以后不再提醒</em></div></div>', style: 'width:90%;', btns: [ { text: '取消', onTap() { wcPop.close(_toolIdx03); } }, { text: '确定', style: 'color: #ff7e00;', onTap() { ... } } ] }); }); // 送礼物弹窗 $(".J__toolbtnLW").on("click", function(){ var _toolIdx04 = wcPop({ skin: 'actionsheet', content: $("#J__popupTmpl-giveGift").html(), position: 'bottom', opacity: 0, style: 'background-color:rgba(0,0,0,.9); border-radius: 10px 10px 0 0;' }); // 初始化swiper礼物 var giftSwiper = new Swiper('.J__swiperGiveGift', { pagination: '.pagination-gift', paginationClickable: true }); }); // 送礼物选项 $("body").on("click", ".J__swiperGiveGift .item", function(){ var coins = $(this).attr("coins"); var _tipidx = wcPop({ id: 'wcCoins', skin: 'ios', title: '<div style="font-size:18px;text-align:left;">提示</div>', content: '<div style="text-align:left;padding-bottom:.25rem;">需要支付'+coins+'微播币，确认支付吗？<div class="flexbox flex-alignc rmt-25"><input class="cp__checkboxPX-switch" type="checkbox" /><em class="flex1 rml-10 c-b9bbbc">以后不再提醒</em></div></div>', style: 'width:90%;', btns: [ { text: '取消', onTap() { wcPop.close(_tipidx); } }, { text: '确定', style: 'color: #ff7e00;', onTap() { ... } } ] }); }); // 礼物充值弹窗 $("body").on("click", "#J__giftRecharge", function(){ var _rechargeIdx = wcPop({ skin: 'actionsheet', content: $("#J__popupTmpl-giftRecharge").html(), position: 'bottom', style: 'border-radius: 10px 10px 0 0;' }); }); // 充值选项 $("body").on("click", "#J__rechargeList .item", function(){ $(this).addClass("on").parent().siblings().find(".item").removeClass("on"); var num = $(this).find(".money").text(); $("#J__btnPayment .num").text(num) }); // 去支付 $("body").on("click", "#J__btnPayment", function(){ var num = $(this).find(".num").text(); popupToPay(num); }); // 支付弹窗 function popupToPay(total){ var goPayIdx = wcPop({ id: 'wcGoPay', skin: 'ios', title: '<div style="font-size:14px;text-align:left;margin:-12px 0 0 -10px;">需支付：' + total + '</div>', content: '<div style="font-size:14px;padding:20px 0;">实际支付：<span style="color:#ff7e00;font-size:28px;">' + total + '</span></div><ul class="payType J__payType"><li class="flexbox flex-alignc active"><span class="flex1"><i class="iconfont icon-wxpay"></i> 微信支付</span><i class="iconfont icon-gouxuan"></i></li><li class="flexbox flex-alignc"><span class="flex1"><i class="iconfont icon-alipay"></i> 支付宝支付</span><i class="iconfont icon-gouxuan"></i></li></ul>', style: 'width:90%;', xclose: true, shadeClose: false, btns: [ { text: '确认付款', style: 'color: #ff7e00;font-size:16px;', onTap() { ... } } ] }); } // 支付方式切换（微信、支付宝） $("body").on("click", ".J__payType li", function(){ $(this).addClass("active").siblings().removeClass("active"); }); // 设置 $(".J__toolbtnSZ").on("click", function(){ var _toolIdx05 = wcPop({ skin: 'actionsheet', content: $("#J__popupTmpl-liveShowSetting").html(), anim: 'scaleIn', xclose: true, opacity: 0, style: 'background-color:rgba(255,255,255,.9); border-radius: 10px 10px 0 0;' }); });