内容简介:原文链接:运用html5开发的仿微信聊天室实战项目weChatRoom,基于h5+css3+zepto+weui+wcPop+swiper等技术混合开发,整体采用flex布局模式,兼容适配各种手机屏幕,实现了消息、表情发送,动图gif,图片、视频预览,红包/打赏等功能。
原文链接: https://www.cnblogs.com/xiaoyan2017/p/9266179.html
运用html5开发的仿微信聊天室实战项目weChatRoom,基于h5+css3+zepto+weui+wcPop+swiper等技术混合开发,整体采用flex布局模式,兼容适配各种手机屏幕,实现了消息、表情发送,动图gif,图片、视频预览,红包/打赏等功能。
// ...滚动聊天区底部 function wchat_ToBottom(){ //$(".wc__chatMsg-panel").animate({scrollTop: $("#J__chatMsgList").height()}, 0); $(".wc__slimscroll2").slimscroll({ scrollBy: $("#J__chatMsgList").height(), height: 'auto' }); } // ...表情、选择区切换 $(".wc__editor-panel").on("click", ".btn", function(){ var that = $(this); $(".wc__choose-panel").show(); if (that.hasClass("btn-emotion")) { $(".wc__choose-panel .wrap-emotion").show(); $(".wc__choose-panel .wrap-choose").hide(); // 初始化swiper表情 !emotionSwiper && $("#J__emotionFootTab ul li.cur").trigger("click"); } else if (that.hasClass("btn-choose")) { $(".wc__choose-panel .wrap-emotion").hide(); $(".wc__choose-panel .wrap-choose").show(); } wchat_ToBottom(); }); // ...处理编辑器信息 // 格式化编辑器包含标签 _editor.addEventListener("click", function () { //$(".wc__choose-panel").hide(); }, true); _editor.addEventListener("focus", function(){ surrounds(); }, true); _editor.addEventListener("input", function(){ surrounds(); }, false); // 发送信息 var $chatMsgList = $("#J__chatMsgList"); 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 html = $editor.html(); var reg = /(http:\/\/|https:\/\/)((\w|=|\?|\.|\/|&|-)+)/g; html = html.replace(reg, "<a href='$1$2'>$1$2</a>"); var msgTpl = [ '<li class="me">\ <div class="content">\ <p class="author">Nice奶思</p>\ <div class="msg">'+ html +'</div>\ </div>\ <a class="avatar" href="微聊(好友主页).html"><img src="img/uimg/u__chat-img14.jpg" /></a>\ </li>' ].join(""); $chatMsgList.append(msgTpl); // 清空聊天框并获取焦点(处理输入法和表情 - 聚焦) if(!$(".wc__choose-panel").is(":hidden")){ $editor.html(""); }else{ $editor.html("").focus().trigger("click"); } wchat_ToBottom(); });
欢迎大家一起交流、学习 Q:282310962 wx:xy190310
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网
猜你喜欢:- Netty网络聊天(一) 聊天室的实战(最易懂)
- 基于Flutter+Dart聊天实例|flutter仿微信界面聊天室
- 实战swoole【聊天室】
- 如何快速实现一个聊天室?
- 搭建Websocket简易聊天室
- go语言实现聊天室
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
创意,未来的工作方式
方军 / 中信出版社 / 2016-11-20 / 58.00元
知识工作者已成过去,创意工作者才是未来 工作的本质是创意 纵观我们身处的世界,除了自然美景,世间或伟大或平凡的事物,几乎都是人观念革新的产物,它们多数是我们在工作过程中群体创意的产物。 从工业时代到知识时代,大多数人通过掌握新知、持续学习,获得社会的认可和回报;但进入以大数据、人工智能、机器人为标志的新时代,单纯的学习已经不能满足社会对人的要求。算法和机器人正在取代人类很多重复性......一起来看看 《创意,未来的工作方式》 这本书的介绍吧!