最近一些直播、小视频什么的都比较火,像陌陌、抖音、火山短视频… 于是空闲时间自己也利用html5技术也试着倒腾了下直播项目,使用到了h5+css3+iscroll+zepot+swiper+wlspop架构开发了一个仿陌陌、火山小视频,项目效果挺不错哒!同时解决了在直播页面聊天时候页面撑起的问题。
效果图如下:
// >>>编辑器处理函数var $chatmsglist = $("#j__chatmsglist");var $editor = $(".j__wlditor"), _editor = $editor[0];// 定义最后光标位置var _lastrange = null, _l = window.getlection && window.getlection();var _rng = {getrange: function () {if (_l && _l.rangecount > 0) {return _l.getrangeat(0);}},addrange: function () {if (_lastrange) {_l.removeallranges();_l.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(); //输入表情时禁止输入法ttimeout(function () {if (document.lection && document.lection.createrange) {document.lection.createrange().pastehtml(img);} el if (window.getlection && window.getlection().getrangeat) {range = _rng.getrange();range.inrtnode(img);range.collap(fal);_lastrange = range; //记录当前光标位置 (否则光标会跑到表情前面)_rng.addrange();}}, 10);} el if (that.hasclass("del")) {// _editor.focus();_editor.blur(); //输入表情时禁止输入法ttimeout(function () {range = _rng.getrange();range.collap(fal);document.execcommand("delete");_lastrange = range;_rng.addrange();}, 10);}});// 发送信息function impty() {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 (impty()) 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>',xclo: 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;',xclo: 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;',xclo: 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.clo(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.clo(_toolidx03);}},{text: '确定',style: 'color: #ff7e00;',ontap() {...}}]});});// 送礼物弹窗$(".j__toolbtnlw").on("click", funct有梦想的人ion(){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.clo(_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%;',xclo: true,shadeclo: fal,btns: [{text: '确认付款',style: 'color: #ff7e00;font-size:16px;',ontap() {...}}]});}// 支付方式切换(微信、支付宝)$("body").on("click", ".j__paytype li", function(){$(this).addclass("active").siblings().removeclass("active");});
/* __ 弹窗模板样式--------------------------------- *//* ...礼物模板 */.wls__givegift-panel .gift__cells ul{display: inline-block; width: 100%;}.wls__givegift-panel .gift__cells ul li{float: left; text-align: center; margin-bottom: .1rem; width: 25%;}.wls__givegift-panel .gift__cells ul li a{border-radius: .1rem; display: inline-block; margin: 0 .1rem; position: relative;}/* .wls__givegift-panel .gift__cells ul li a:active{background-color: rgba(255,255,255,.1);} */.wls__givegift-panel .gift__cells ul li a .giftimg{display: table; text-align: center;height: 1.5rem; width: 1.5rem; position: relative;}.wls__givegift-panel .gift__cells ul li a .giftimg img{display: table-cell; vertical-align: middle; height: 100%; width: 100%; object-fit: cover;}.wls__givegift-panel .gift__cells ul li a em{color: #dcdddd; display: block; font-size: .24rem; font-family: arial; margin-top: .1rem;}.wls__givegift-panel .gift__cells ul li a em.coin{color: #7a7d81; font-size: .2rem; margin: .05rem 0;}.wls__givegift-panel .gift__cells ul li a .tag{background-image: linear-gradient(to right, #ff7e00, #ffd100); border-radius: 2px; color: #fff; font-size: .22r高考早餐吃什么最好em; padding: .02rem .07rem 0; line-height: .3rem; position: absolute; top: 10px; left: 0;}/* ...充值模板 */.wls__giftrecharge-panel .hdtit{color: #191f25;font-size: 16px;padding-bottom: 15px;text-align: center;}.wls__giftrecharge-panel .recharge-list{padding: 0 10px;}.wls__giftrecharge-panel .recharge-list .totalamount{color: #9ea0a3; font-size: 14px; padding: 10px 0;}.wls__giftrecharge-panel .recharge-list ul li{float: left; padding: 3px 2px; width: 33.3%;}.wls__giftrecharge-panel .recharge-list ul li .item{background: #f8f8f8; border: 2px solid #f8f8f8; border-radius: 10px; padding: 15px 0; text-align: center;}.wls__giftrecharge-panel .recharge-list ul li .item .coin{color: #191f25; font-size: 14px; font-family: arial;}.wls__giftrecharge-panel .recharge-list ul li .item .coin b{font-size: 18px; font-weight: 700;}.wls__giftrecharge-panel .recharge-list ul li .item .money{color: #b9bbbc; display: block; font-size: 12px; font-family: arial; margin-top: 5px;}.wls__giftrecharge-panel .recharge-list ul li .item.on{border-color: #ff7e00;}.wls__giftrecharge-panel .recharge-list ul li .item.on .coin{color: #ff7e00;}.wls__giftrecharge-panel .recharge-list ul li .item.on .money{color: #ff7e00;}.wls__giftrecharge-panel .btn-payment{border-radius: 30px; color: #fff; font-size: .32rem; line-height: 1rem;}.wls__giftrecharge-panel .btn-payment .num{font-size: .24rem;}/* 去支付 */#wcgopay .paytype{padding: 10px 0;text-align: left;}#wcgopay .paytype li{color: #9ea0a3;font-size: 14px;height: 42px;position: relative;}#wcgopay .paytype li:before{content: ''; border-top: 1px solid #dcdddd; color: #dcdddd; height: 1px; width: 100%; position: absolute; left: 0; top: 0; z-index: 11; transform: scaley(0.5); -webkit-transform: scaley(0.5);}#wcgopay .paytype li:first-child:before{border-top: 0;}#wcgopay .paytype li .icon-wxpay{color: #00c800; display: inline-block; vertical-align: top; font-size: 18px; margin-top: -2px;}#wcgopay .paytype li .icon-alipay{color: #55abe6; display: inline-block; vertical-align: top; font-size: 18px; margin-top: -2px;}#wcgopay .paytype li .icon-gouxuan{color: #dcdddd; display:none; font-size: 20px;}#wcgopay .paytype li.active{color: #191f25;}#wcgopay .paytype li.active .icon-gouxuan{color: #ff7e00; display:block;}/* ...红包模板 */.wls__hongbao-panel ul li{margin-top: .35rem; text-align: left;}.wls__hongbao-panel ul li .item{background-color: rgba(255,255,255,.05); border:1px solid #ea655b; border-radius: .05rem; align-items: center; padding: 0 .25rem; min-height: .9rem;}.wls__hongbao-panel ul li .item .lbl{color: #dcdddd; display: block; font-size: .28rem;}.wls__hongbao-panel ul li .item .unit{color: #ffe9be; font-size: .28rem; margin-left: .15rem;}.wls__hongbao-panel ul li .item .ipt-txt{background:none;border: 0; color:#ffe9be; font-size: .28rem; font-family: 宋体; outline: none; text-align: right; padding: .1rem 0; min-width: 1rem;}.wls__hongbao-panel ul li .item input::-webkit-input-placeholder {color:#dcdddd;}.wls__hongbao-panel ul li .item input::-moz-placeholder {color:#dcdddd;}.wls__hongbao-panel ul li .moneytotal{color: #ffe9be; font-size: .32rem; font-family: arial; font-weight: 700; text-align: center;}.wls__hongbao-panel ul li .moneytotal .num{font-size: .8rem; font-weight: 700; vertical-align: middle;}.wls__hongbao-panel ul li .item-btn{padding-top: .5rem;}/* ...评论模板 */#wccmts .popui__panel-cnt{padding: 0;}.wls__cmtlists-panel .cmt-head{font-size: 14px; font-weight: 700; padding: 10px 15px; position: relative;}.wls__cmtlists-panel .cmt-head .cmt-clo{display:table; text-align: center; height: 40px; width: 40px;position: absolute; top: 0; right: 0;}.wls__cmtlists-panel .cmt-head .cmt-clo .iconfont{color:#575b60; font-size:18px; display: table-cell; vertical-align: middle;}.wls__cmtlists-panel .cmt-list{background:#f8f8f8; box-shadow: 0 -1px 3px rgba(100,100,100,.1) int; height: 6rem; overflow: auto; -webkit-overflow-scrolling: touch;}.wls__cmtlists-panel .cmt-list .item{padding: 10px; position: relative;}.wls__cmtlists-panel .cmt-list .item:after{content: '';border-bottom: 1px solid #dcdddd;color: #dcdddd;height: 1px;position: absolute;left: 50px;right:0;bottom: 0;z-index: 11;transform: scaley(0.5);-webkit-transform: scaley(0.5);}.wls__cmtlists-panel .cmt-list .item:last-child:after{display: none;}.wls__cmtlists-panel .cmt-list .item .avator{border-radius:50%; height: 30px; width: 30px; object-fit: cover;}.wls__cmtlists-panel .cmt-list .item .cnts{padding: 0 10px;}.wls__cmtlists-panel .cmt-list .item .cnts h2{color: #7a7d81; font-size: 12px; font-family: arial;}.wls__cmtlists-panel .cmt-list .item .cnts .ct{color: #191f25; font-size: 14px; padding: 5px 0;}.wls__cmtlists-panel .cmt-list .item .cnts .ct .face{vertical-align: top; margin:0 1px; height: 20px;}.wls__cmtlists-panel .cmt-list .item .cnts .ct .lg-face{vertical-align: top; height: 120px;}.wls__cmtlists-panel .cmt-list .item .cnts .ct .img__pic{vertical-align: top; height: 120px;}.wls__cmtlists-panel .cmt-list .item .cnts .reply{background: #fff; border-radius: 5px; color: #405da1; font-size: 12px; padding: 3px 5px; line-heigh阻断药t: 18px;}.wls__cmtlists-panel .cmt-list .item .cnts .time{color: #b9bbbc; font-size: 12px; margin-top: 3px;}.wls__cmtlists-panel .cmt-list .item .zan{color: #b9bbbc; text-align: center;}.wls__cmtlists-panel .cmt-list .item .zan .iconfont{font-size: 18px;}.wls__cmtlists-panel .cmt-list .item .zan p{font-size: 12px; font-family: arial;}/* }}} */
项目开发用到的一些素材
本文发布于:2023-04-03 01:58:00,感谢您对本站的认可!
本文链接:https://www.wtabcd.cn/fanwen/zuowen/5cf0d1ea25b4be24c240c44849f7008d.html
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系,我们将在24小时内删除。
本文word下载地址:移动端h5直播项目.doc
本文 PDF 下载地址:移动端h5直播项目.pdf
留言与评论(共有 0 条评论) |