龙空技术网

html5聊天实例|h5+jquery仿微信界面聊天|朋友圈模板

web前端进阶 264

前言:

目前同学们对“githubhtml预览”可能比较讲究,同学们都想要学习一些“githubhtml预览”的相关资讯。那么小编同时在网络上网罗了一些关于“githubhtml预览””的相关资讯,希望你们能喜欢,大家一起来了解一下吧!

项目介绍

采用html5+css3+Zepto+swiper+wcPop+flex等技术开发的聊天实例。实现发送消息/表情,图片/视频预览,添加好友/群聊,语音模块,地图定位模块,整体功能界面效果类似微信聊天。

使用技术

整体布局:HTML5 + css3(flex) + fontSize.jszepto版本:Zepto v1.0轮播组件:Swiper 3.4.1字体图标:阿里iconfont字体图标库下拉刷新:mescroll v1.4.0效果演示

视频加载中...

了解Flex布局

Flex | Flexible Box的缩写,意为”弹性布局”,用来为盒状模型提供最大的灵活性。

2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。Flex 布局将成为未来布局的首选方案。

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

如上图:容器默认存在两根轴:水平的主轴(main axis)和垂直的交叉轴(cross axis)

想要了解Flex布局更多的用法,可以去网上查阅相关资料,这里不作详细概述了。

下拉刷新插件mescroll

mescroll | 精致的下拉刷新和上拉加载 js框架.支持vue,完美运行于移动端和主流PC浏览器。

注意:如果你是uni-app开发者,下面是mescroll的uniapp版本

运行效果图弹窗组件wcPop

wcpop是一个手机端弹窗插件,提供了多种类型的弹窗功能,有ios、android弹窗效果

// 基本使用wcPop({   //传入参数})

如上图 弹窗菜单,使用下面代码即可实现

$("#J_chatList").on("contextmenu", ".item", function (e) {	e.preventDefault();		//获取长按坐标点	var _points = [e.pageX, e.pageY];		wcPop({		skin: 'contextmenu',		follow: _points,		opacity: 0,		btns: [			{				text: '发送给朋友',				style: 'color:#212121;',				onTap() {...}			}, 			{text: '复制'}, 			{text: '收藏'},			{text: '撤回'},			{text: '删除'},		]	});});
聊天功能模块滚动聊天消息至最底部
function wchat_ToBottom() {	$(".mescroll").animate({ scrollTop: $("#J__chatMsgList").height() }, 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_item", function () {	var that = $(this), range;		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);});
判断编辑框信息是否为空
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, "") == "";}

❤️ 最后

如果你觉得这篇文章对你有帮助,麻烦点个「关注/转发」,让更多的人也能看到你的分享!

标签: #githubhtml预览 #中文版jquery模板 #表格css手机模板