HTML 自定义实现emoji

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;
		b