CSS雪碧图制作emoji表情包

效果图：

原理：利用雪碧图，来实现emoji表情包，减少图片请求数。
表情包转换为文字 & 文字转换为表情包维护两个对象来实现。

缺点：表情包大小由雪碧图中表情包大小控制，不能更改。

htm代码

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>emo</title><link rel="stylesheet" href="emoji.css"><style>ul,li {padding: 0;margin: 0;list-style: none;}#emo_container {width: 280px;display: flex;flex-wrap: wrap;}#emo_container li {width: 70px;height: 70px;margin-bottom: 10px;cursor: pointer;position: relative;}#emo_container li span {display: none;position: absolute;width: 100%;bottom: -10px;font-size: 12px;text-align: center;}#emo_container li:hover span {display: block;}#emo_input {margin-top: 50px;}.emo-span {display: inline-block;width: 70px;height: 70px;vertical-align: middle;}.show {min-height: 200px;margin-top: 100px;border: 1px solid;}</style>
</head>
<body><ul id="emo_container"></ul><input type="text" id="emo_input"/><button id="send_msg">send</button><div class="show"></div>
</body>
<script src="jquery-2.1.4.js"></script>
<script>$(function(){let li_html = "";let input = "";let input_dom = $("#emo_input")[0];let emotions = {"1":"[微笑]","2":"[撇嘴]","3":"[色]","4":"[发呆]","5":"[得意]","6":"[流泪]","7":"[害羞]","8":"[闭嘴]"};let emo_index = {"[微笑]":"1","[撇嘴]":"2","[色]":"3","[发呆]":"4","[得意]":"5","[流泪]":"6","[害羞]":"7","[闭嘴]":"8"};//渲染表情包Object.keys(emotions).map(function (value,index) {li_html += `<li class="bg-${value}" data-emo="${value}"><span>${emotions[value]}</span></li>`;});$("#emo_container").html(li_html);//预览输入的文字$("#emo_container").on("click","li",function () {let emo = $(this).data("emo");input = $("#emo_input").val();insert(emotions[emo]);//确保插入表情后光标在末尾input_dom.focus();});//界面展示输入的内容$("#send_msg").click(function () {input = $("#emo_input").val();let emo_input = renderEmo(input);$(".show").append(`<div>${emo_input}</div>`);$("#emo_input").val("");});//表情文字替换为表情图片function renderEmo(text) {let pattern = /\[[\u4e00-\u9fa5]+\]/g;return text.replace(pattern,function (match) {return `<span class="emo-span bg-${emo_index[match]}"></span>`})}//文字中间插入表情function insert(str) {var value = input_dom.value;if(typeof document.selection != "undefined"){document.selection.createRange().text = str;}else{return input_dom.value = value.substr(0,input_dom.selectionStart)+str+value.substring(input_dom.selectionStart,value.length);}}})
</script>
</html>

CSS代码

.bg-1 {width: 66px; height: 66px;background: url('emoji.png') -10px -10px;
}
.bg-2 {width: 66px; height: 66px;background: url('emoji.png') -96px -10px;
}
.bg-3 {width: 66px; height: 66px;background: url('emoji.png') -10px -96px;
}
.bg-4 {width: 66px; height: 66px;background: url('emoji.png') -96px -96px;
}
.bg-5 {width: 66px; height: 66px;background: url('emoji.png') -182px -10px;
}
.bg-6 {width: 66px; height: 66px;background: url('emoji.png') -182px -96px;
}
.bg-7 {width: 66px; height: 66px;background: url('emoji.png') -10px -182px;
}
.bg-8 {width: 66px; height: 66px;background: url('emoji.png') -96px -182px;
}

CSS雪碧图制作emoji表情包相关推荐

CSS雪碧图demo（含雪碧代码）
css雪碧图demo效果图,含hover,代码附件下载sprite_demo.zip 雪碧图制作问题参考: HTML 5开发的在线雪碧图片合成工具 http://developer.51cto.com ...
css雪碧图及优缺点
[前言] 做开发的小伙伴可能经常遇到雪碧图,那么究竟什么是雪碧图呢? [简介] 官方解释: CSS雪碧图即CSS Sprite(精灵),在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将 ...
photoshop 雪碧图制作
图片拖入后一般取同行同列最高最宽自动在所选目录生成打开: 修改四次请求有点多啊. 打开 (下载)css sprite 自动生成坐标地址. 不过我们要把它排远一点 OK了. 我们生成以后: 坐标 ...
css sprit雪碧图制作，使用教程
写在前面: 在网页制作中,雪碧图也是前端攻城狮必须掌握的一项小技能.百度词条对雪碧图的解释是:CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景 ...
php 实现雪碧图制作,如何在小程序中使用雪碧图
小这对近样这近样这近样这近样这近样这近样这程序对上传的代码有2M的大小限制,因此一般在小程序中使用icon的时候,要么是用icon-font,要么就是将icon图片上传到cdn再使用,而不会将图片放在 ...
CSS 雪碧图及其优缺点
CSS Sprites简介:国内叫雪碧图或者雪碧精灵.它允许将网页中多个零星小图都包含到一张大图中去,减少每个图的 HTTP 请求来提高图片加载效率,通过 background-image.backg ...
css雪碧图如何调整大小
1.通过transform: scale(0.5);来缩放,但在本身有过渡或动画时,刷新页面会有卡顿拉伸现象!不建议这样做! 2.直接调整雪碧图background-size大小例如,雪碧图规格14 ...
html css雪碧图,css常见小技巧（雪碧图）
1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用 CSS雪碧即CSS Sprite,也有人叫它CSS精灵,是一种CSS图像合并技术,该方法是将小图标和背景图像合并到一张图片上,然后利用 ...
html css雪碧图,css sprite css雪碧图生成工具
什么是css sprite CSS sprite在国内很多人叫css精灵,是一种网页图片应用处理方式.它允许你将一个页面涉及到的所有零星图片都包含到一张大图中去,这样一来,当访问该页面时,载入的图片就 ...

CSS雪碧图制作emoji表情包

CSS雪碧图制作emoji表情包相关推荐

最新文章

热门文章