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的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。