Html自定义emoji

需要材料

jquery.min.js

jquery.nicescroll.min.js

emoji 图片素材

导入js

<script type='text/javascript' src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
<script type='text/javascript' src="https://cdn.bootcss.com/jquery.nicescroll/3.7.6/jquery.nicescroll.min.js"></script>

CSS 定义

  <style type='text/css'>.emoji_container{border:1px lightgray solid;width:90%;height:274px;overflow-y: auto;display:none;padding: 5px;z-index:1999;}.emoji_wrap{list-style: none;padding-left: 0;margin: 0;}.emoji_wrap li{width: 54px;height: 54px;float: left;border: 1px solid #e3e3e3;margin-top: -1px;margin-left: -1px;}.emoji_wrap  li a {display: block;line-height: 54px;text-align: center;cursor: pointer;}.emoji_wrap  li a img {vertical-align: middle;max-width: 52px;max-height: 52px;}</style>

定义表情按钮和表情面板

这里用最原始的按钮 input（未作美化），点击按钮实现显示和隐藏表情面板的div

<div class='edit' contenteditable='true'><div>
<input type='button' onclick='bindEmoji()' value='表情'/>

通过js动态初始化表情

<script type='text/javascript'>//定义emoji层的现实和关闭，这里用来jqeury的动画function bindEmoji(){toggleEmoji();}function toggleEmoji(){$('.emoji_container').slideToggle();}//初始化表情function initEmoji(editObj){$(document.body).append("<div class='emoji_container'><ul class='emoji_wrap'></ul></div>");for(i=1;i<92;i++){$('.emoji_wrap').append("<li><a data-emoji_code='#em1_5#' data-index='4' title=''><img src='dist/img/qq/"+i+".gif' class='emoji_item'></a></li>");}//居中处理var obj = $('.emoji_container');var docHei = $(window).height();var docWid = $(window).width();var hei = $(obj).height();var wid = $(obj).width();$(obj).css({"position":"absolute","top":(docHei-hei)/2,"left":(docWid-wid)/2});//用nicesroll插件美化div滚动条的效果 $('.emoji_container').niceScroll({cursorcolor: "#ccc",//#CC0071 光标颜色cursoropacitymax: 1, //改变不透明度非常光标处于活动状态（scrollabar“可见”状态），范围从1到0touchbehavior: false, //使光标拖动滚动像在台式电脑触摸设备cursorwidth: "5px", //像素光标的宽度cursorborder: "0", // 游标边框css定义cursorborderradius: "5px",//以像素为光标边界半径autohidemode: true //是否隐藏滚动条});//选择表情后，关闭，这里实现的不太友好，有兴趣可以实现点击外部，div关掉$('.emoji_item').on('click',function(){$(editObj).append("<img src='"+$(this).attr('src')+"'>");$('.emoji_container').fadeOut();});}//初始化界面，传入接受表情的div编辑框initEmoji($('.edit'));</script>

效果演示

实现功能比较简单，很多地方需要优化。源码在下面需要可以下载

https://download.csdn.net/download/qqq514058070/11022593

HTML 自定义实现emoji相关推荐

android emoji转换成字符串,安卓的emoji表情转换为文字
由于安卓系统显示的emoji表情不那么好看,所以在项目的聊天里面使用了自己的图片代替了系统的emoji显示,但是问题来了,在收到消息通知的时候,通知栏并没有显示自定义的emoji显示,而是显示了系统的 ...
自定制emoji替换系统的emoji键盘
一.关于emoji表情随着iOS系统版本的升级,对原生emoji表情的支持也越来越丰富.emoji表情是unicode码中为表情符号设计的一组编码,当然,还有独立于unicode的另一套编码SBUn ...
如何处理文字中的emoji？
开源中国的"弹一弹"中处理emoji的过程 emoji键盘开源中国的emoji键盘类为EmojiPageVC,继承自UIPageViewController,为分页控制器.分页控 ...
微博的文本编辑和显示(emoji表情，@某人、链接高亮点击)
日常开发的过程中我们经常会需要实现类似微博的文本输入框,可以自定义的emoji.@某人高亮显示.快捷删除.文本显示表情.@人和链接点解等效果.本人躺尸过各种坑后来一波,废话不说,先看效果: Demo ...
android显示ios emoji表情符号,IM 使用的 Emoji 表情显示
估计很多人都看到输入法键盘中使用的输入表情的Emoji. 键盘emoji.png Emoji.png Emoji使用基础可以看到在不同的Native Android IOS系统中对应的emoji码显 ...
H5小程序中实现emoji表情
H5页面&小程序如何实现emoji表情? emoji表情都非常熟悉了,比如微信的会话窗口可以发表情. 但是仔细看有一个重要的发现,比如朋友给你发一个emoji表情,在聊天会话列表页查看最近消息 ...
微信公众号自定义菜单添加emoji表情图标
微信公众号自定义菜单添加emoji表情图标第一步:打开微信公众平台接口调试工具,点击前往接口调试工具: 第二步:把这段代码 {"button":[{"sub_but ...
微信自定义菜单的emoji图标
微信公众号自定义菜单添加emoji表情图标第一步:打开微信公众平台接口调试工具,点击前往接口调试工具: 第二步:把这段代码 {"button":[{"sub_butt ...
Emoji表情转为自定义标签格式，Unicode编码等
Emoji表情转为自定义标签格式,Unicode编码等 https://github.com/ChurchTao/emoji-js 先上源代码,有问题提个issue ,有用的点个star~ 相信大家 ...

HTML 自定义实现emoji

Html自定义emoji

导入js

CSS 定义

定义表情按钮和表情面板

通过js动态初始化表情

效果演示

HTML 自定义实现emoji相关推荐

最新文章

热门文章