js 制作qq、微信 的表情

这篇具有很好参考价值的文章主要介绍了js 制作qq、微信 的表情。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

这篇csdn缺少的图片资源可以在“我的资源那下载,有一个zip的包”


表情的符号

export const QQFaceList = [
  {
    name: 'weixiao',
    code: '[微笑]',
  },
  {
    name: 'piezui',
    code: '[撇嘴]',
  },
  {
    name: 'se',
    code: '[色]',
  },
  {
    name: 'fadai',
    code: '[发呆]',
  },
  {
    name: 'deyi',
    code: '[得意]',
  },
  {
    name: 'liulei',
    code: '[流泪]',
  },
  {
    name: 'haixiu',
    code: '[害羞]',
  },
  {
    name: 'bizui',
    code: '[闭嘴]',
  },
  {
    name: 'shui',
    code: '[睡]',
  },
  {
    name: 'daku',
    code: '[大哭]',
  },
  {
    name: 'ganga',
    code: '[尴尬]',
  },
  {
    name: 'fanu',
    code: '[发怒]',
  },
  {
    name: 'tiaopi',
    code: '[调皮]',
  },
  {
    name: 'ciya',
    code: '[呲牙]',
  },
  {
    name: 'jingya',
    code: '[惊讶]',
  },
  {
    name: 'nanguo',
    code: '[难过]',
  },
  {
    name: 'ku',
    code: '[酷]',
  },
  {
    name: 'lenghan',
    code: '[冷汗]',
  },
  {
    name: 'zhuakuang',
    code: '[抓狂]',
  },
  {
    name: 'tu',
    code: '[吐]',
  },
  {
    name: 'touxiao',
    code: '[偷笑]',
  },
  {
    name: 'yukuai',
    code: '[愉快]',
  },
  {
    name: 'baiyan',
    code: '[白眼]',
  },
  {
    name: 'aoman',
    code: '[傲慢]',
  },
  {
    name: 'jie',
    code: '[饥饿]',
  },
  {
    name: 'kun',
    code: '[困]',
  },
  {
    name: 'jingkong',
    code: '[惊恐]',
  },
  {
    name: 'liuhan',
    code: '[流汗]',
  },
  {
    name: 'hanxiao',
    code: '[憨笑]',
  },
  {
    name: 'youxian',
    code: '[悠闲]',
  },
  {
    name: 'fendou',
    code: '[奋斗]',
  },
  {
    name: 'zhouma',
    code: '[咒骂]',
  },
  {
    name: 'yiwen',
    code: '[疑问]',
  },
  {
    name: 'xu',
    code: '[嘘]',
  },
  {
    name: 'yun',
    code: '[晕]',
  },
  {
    name: 'fengle',
    code: '[疯了]',
  },
  {
    name: 'shuai',
    code: '[衰]',
  },
  {
    name: 'kulou',
    code: '[骷髅]',
  },
  {
    name: 'qiaoda',
    code: '[敲打]',
  },
  {
    name: 'zaijian',
    code: '[再见]',
  },
  {
    name: 'cahan',
    code: '[擦汗]',
  },
  {
    name: 'koubi',
    code: '[抠鼻]',
  },
  {
    name: 'guzhang',
    code: '[鼓掌]',
  },
  {
    name: 'choudale',
    code: '[糗大了]',
  },
  {
    name: 'huaixiao',
    code: '[坏笑]',
  },
  {
    name: 'zuohengheng',
    code: '[左哼哼]',
  },
  {
    name: 'youhengheng',
    code: '[右哼哼]',
  },
  {
    name: 'haqie',
    code: '[哈欠]',
  },
  {
    name: 'bishi',
    code: '[鄙视]',
  },
  {
    name: 'weiqu',
    code: '[委屈]',
  },
  {
    name: 'kuaikule',
    code: '[快哭了]',
  },
  {
    name: 'yinxian',
    code: '[阴险]',
  },
  {
    name: 'qinqin',
    code: '[亲亲]',
  },
  {
    name: 'xia',
    code: '[吓]',
  },
  {
    name: 'kelian',
    code: '[可怜]',
  },
  {
    name: 'caidao',
    code: '[菜刀]',
  },
  {
    name: 'xigua',
    code: '[西瓜]',
  },
  {
    name: 'pijiu',
    code: '[啤酒]',
  },
  {
    name: 'lanqiu',
    code: '[篮球]',
  },
  {
    name: 'pingpang',
    code: '[乒乓]',
  },
  {
    name: 'kafei',
    code: '[咖啡]',
  },
  {
    name: 'fan',
    code: '[饭]',
  },
  {
    name: 'zhutou',
    code: '[猪头]',
  },
  {
    name: 'meigui',
    code: '[玫瑰]',
  },
  {
    name: 'diaoxie',
    code: '[凋谢]',
  },
  {
    name: 'zuichun',
    code: '[嘴唇]',
  },
  {
    name: 'aixin',
    code: '[爱心]',
  },
  {
    name: 'xinsui',
    code: '[心碎]',
  },
  {
    name: 'dangao',
    code: '[蛋糕]',
  },
  {
    name: 'shandian',
    code: '[闪电]',
  },
  {
    name: 'zhadan',
    code: '[炸弹]',
  },
  {
    name: 'dao',
    code: '[刀]',
  },
  {
    name: 'zuqiu',
    code: '[足球]',
  },
  {
    name: 'piaochong',
    code: '[瓢虫]',
  },
  {
    name: 'bianbian',
    code: '[便便]',
  },
  {
    name: 'yueliang',
    code: '[月亮]',
  },
  {
    name: 'taiyang',
    code: '[太阳]',
  },
  {
    name: 'liwu',
    code: '[礼物]',
  },
  {
    name: 'yongbao',
    code: '[拥抱]',
  },
  {
    name: 'qiang',
    code: '[强]',
  },
  {
    name: 'ruo',
    code: '[弱]',
  },
  {
    name: 'woshou',
    code: '[握手]',
  },
  {
    name: 'shengli',
    code: '[胜利]',
  },
  {
    name: 'baoquan',
    code: '[抱拳]',
  },
  {
    name: 'gouyin',
    code: '[勾引]',
  },
  {
    name: 'quantou',
    code: '[拳头]',
  },
  {
    name: 'chajin',
    code: '[差劲]',
  },
  {
    name: 'aini',
    code: '[爱你]',
  },
  {
    name: 'NO',
    code: '[NO]',
  },
  {
    name: 'OK',
    code: '[OK]',
  },
  {
    name: 'aiqing',
    code: '[爱情]',
  },
  {
    name: 'feiwen',
    code: '[飞吻]',
  },
  {
    name: 'tiaotiao',
    code: '[跳跳]',
  },
  {
    name: 'fadou',
    code: '[发抖]',
  },
  {
    name: 'ouhuo',
    code: '[怄火]',
  },
  {
    name: 'zhuanquan',
    code: '[转圈]',
  },
  {
    name: 'ketou',
    code: '[磕头]',
  },
  {
    name: 'huitou',
    code: '[回头]',
  },
  {
    name: 'tiaosheng',
    code: '[跳绳]',
  },
  {
    name: 'touxiang',
    code: '[投降]',
  },
  {
    name: 'jidong',
    code: '[激动]',
  },
  {
    name: 'luanwu',
    code: '[乱舞]',
  },
  {
    name: 'xianwen',
    code: '[献吻]',
  },
  {
    name: 'zuotaiji',
    code: '[左太极]',
  },
]

export const emojiList = [
  '\\ue415',
  '\\ue056',
  '\\ue057',
  '\\ue414',
  '\\ue405',
  '\\ue106',
  '\\ue418',
  '\\ue417',
  '\\ue40d',
  '\\ue404',
  '\\ue40a',
  '\\ue105',
  '\\ue409',
  '\\ue40e',
  '\\ue402',
  '\\ue108',
  '\\ue403',
  '\\ue058',
  '\\ue407',
  '\\ue401',
  '\\ue40f',
  '\\ue40b',
  '\\ue406',
  '\\ue413',
  '\\ue411',
  '\\ue412',
  '\\ue410',
  '\\ue107',
  '\\ue059',
  '\\ue416',
  '\\ue408',
  '\\ue40c',
  '\\ue11a',
  '\\ue10c',
  '\\ue022',
  '\\ue023',
  '\\ue329',
  '\\ue32e',
  '\\ue335',
  '\\ue337',
  '\\ue336',
  '\\ue13c',
  '\\ue331',
  '\\ue03e',
  '\\ue11d',
  '\\ue05a',
  '\\ue00e',
  '\\ue421',
  '\\ue00d',
  '\\ue011',
  '\\ue22e',
  '\\ue22f',
  '\\ue231',
  '\\ue230',
  '\\ue00f',
  '\\ue14c',
  '\\ue111',
  '\\ue425',
  '\\ue001',
  '\\ue002',
  '\\ue005',
  '\\ue004',
  '\\ue04e',
  '\\ue11c',
  '\\ue003',
  '\\ue04a',
  '\\ue04b',
  '\\ue049',
  '\\ue048',
  '\\ue04c',
  '\\ue13d',
  '\\ue43e',
  '\\ue04f',
  '\\ue052',
  '\\ue053',
  '\\ue524',
  '\\ue52c',
  '\\ue52a',
  '\\ue531',
  '\\ue050',
  '\\ue527',
  '\\ue051',
  '\\ue10b',
  '\\ue52b',
  '\\ue52f',
  '\\ue109',
  '\\ue01a',
  '\\ue52d',
  '\\ue521',
  '\\ue52e',
  '\\ue055',
  '\\ue525',
  '\\ue10a',
  '\\ue522',
  '\\ue054',
  '\\ue520',
  '\\ue032',
  '\\ue303',
  '\\ue307',
  '\\ue308',
  '\\ue437',
  '\\ue445',
  '\\ue11b',
  '\\ue448',
  '\\ue033',
  '\\ue112',
  '\\ue325',
  '\\ue312',
  '\\ue310',
  '\\ue126',
  '\\ue008',
  '\\ue03d',
  '\\ue00c',
  '\\ue12a',
  '\\ue009',
  '\\ue145',
  '\\ue144',
  '\\ue03f',
  '\\ue116',
  '\\ue10f',
  '\\ue101',
  '\\ue13f',
  '\\ue12f',
  '\\ue311',
  '\\ue113',
  '\\ue30f',
  '\\ue42b',
  '\\ue42a',
  '\\ue018',
  '\\ue016',
  '\\ue014',
  '\\ue131',
  '\\ue12b',
  '\\ue03c',
  '\\ue041',
  '\\ue322',
  '\\ue10e',
  '\\ue43c',
  '\\ue323',
  '\\ue31c',
  '\\ue034',
  '\\ue035',
  '\\ue045',
  '\\ue047',
  '\\ue30c',
  '\\ue044',
  '\\ue120',
  '\\ue33b',
  '\\ue33f',
  '\\ue344',
  '\\ue340',
  '\\ue147',
  '\\ue33a',
  '\\ue34b',
  '\\ue345',
  '\\ue01d',
  '\\ue10d',
  '\\ue136',
  '\\ue435',
  '\\ue252',
  '\\ue132',
  '\\ue138',
  '\\ue139',
  '\\ue332',
  '\\ue333',
  '\\ue24e',
  '\\ue24f',
  '\\ue537',
]

这样使用

<style lang="less" scoped>
	.qEmoji {
		background: url('/src/components/emoji/images/1.png');
		height: 25px;
		width: 25px;
		margin: 0 auto;
	}
	.eList {
		background: url('/src/components/emoji/images/2.png');
		height: 25px;
		width: 25px;
		margin: 0 auto;
	}
</style>


<a-tabs v-model:activeKey="activeKey" tab-position="top" :animated="true">

	<a-tab-pane key="1" tab="QQ" style="height: 400px;">
		<a-row>
			<a-col v-for="(item, index) in QQFaceList" :span="2" :key="index">
				<div
					class="qEmoji"
					:style="{ 'background-position': emojiPosition(index) }"
					@click="setEmoji(item.code)"
				></div>
			</a-col>
		</a-row>
	</a-tab-pane>
	 
	<a-tab-pane key="2" tab="微信" style="height: 400px;">
		<a-row>
			<a-col v-for="(item, index) in emojiList" :span="2" :key="index">
				<div
					class="eList"
					@click="setEmoji(item)"
					:style="{ 'background-position': emojiPosition(index) }"
				></div>
			</a-col>
		</a-row>
	</a-tab-pane>
 
</a-tabs>

----------------------------------------------------------------------------------------------

import { QQFaceList } from '@/components/emoji/emoji.ts'
import { emojiList } from '@/components/emoji/emoji.ts'

const emojiPosition = (index: any) => {
	return '-' + (index % 15) * 29 + 'px -' + parseInt(index / 15) * 29 + 'px'
}

const setEmoji = (emoji: string) => {
	console.log('emoji=', emoji)
}


文章来源地址https://www.toymoban.com/news/detail-861323.html

到了这里,关于js 制作qq、微信 的表情的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • AI VS 好莱坞?新时代电影工作流;MJ制作微信表情包的麻瓜教程;关于ControlNet的一切;AI创业真钱景 | ShowMeAI日报

    👀 日报周刊合集 | 🎡 生产力工具与行业应用大全 | 🧡 点赞关注评论拜托啦! 4月21日,小马智行获得广州市首个也是唯一一个远程载客测试许可,获准在广州开启全新阶段的自动驾驶出行服务(Robotaxi)。即日起,在广州南沙区803平方公里范围内,市民有机会通过手机软件

    2024年02月09日
    浏览(37)
  • 怎么用Midjourney制作表情包

    要使用Midjourney制作表情包,可以按照以下步骤进行操作: 1. 打开Midjourney的官方网站或下载Midjourney应用程序,并登录你的账户。 2. 在Midjourney中,选择创建新项目或表情包。 3. 在项目中,你可以选择使用预设的模板或自定义制作表情包。如果你选择使用模板,可以在模板库中

    2024年02月17日
    浏览(42)
  • 我是如何利用midjourney制作表情包的

    起初是在看到大厂文章《【Midjourney教程】设计麻瓜也能10分钟上架一套表情包》以后,才想自己试试的。如果你是midjourney的老鸟了,那么参照着文章,应该也能很顺利的完成。下面我介绍下,我遇到的问题和解决方案 准备: 一个midjourney账号,作画使用(目前架设在discord平

    2024年02月09日
    浏览(68)
  • 表情包APP小程序制作开发功能有哪些?

           表情包小程序在实际的开发过程中所具备的功能都是至关重要的,功能完善好操作才能更受用户青睐。 表情包小程序制作开发功能 包括但不仅限于以下几点:        1、热门表情包推荐。表情包制作小程序为用户推荐最热门的表情包,让用户可以紧跟当下流行趋势

    2024年02月06日
    浏览(34)
  • 抖音短视频:表情包账号的魅力与运营之道以及制作与工具

            在短视频的浪潮中,抖音以其独特的创意和趣味性成为了年轻人的最爱。其中,表情包账号更是凭借其生动、形象的表现方式,赢得了众多用户的青睐。本文将深入探讨抖音短视频表情包账号的魅力所在以及如何有效运营。 情感传达的直观性 : 表情包以其丰富的

    2024年03月21日
    浏览(39)
  • vue.js表情文本输入框组件

    JS操作文本域获取光标/指定位置插入 vue.js支持表情输入 ttkwsd博客 欢迎来到我的个人博客留言评论:www.pscool.fun 不能换行的bug已处理… emoji.json 表情图片放在public的emoji文件夹下面 emoji.json放在src/components/EmojiText文件夹下,文件内容如下: EmojiText.vue 里面默认用了iconfont的字体

    2023年04月15日
    浏览(32)
  • 使用易语言+myqq制作QQ群管理机器人-入门教程

    QQ群管理如何提高效率?当然是使用QQ机器人来管理群最轻松了。 如果你有兴趣自己制作一款机器人,那么我将教你制作一款简单的机器人! 1:安装易语言,如果你不会易语言,这个教程您可能会看不懂,当然,只要您有一定编程经验,要看懂还是很简单的。 2:下载myqq。百

    2024年02月09日
    浏览(82)
  • 手把手QQ机器人制作教程,根据官方接口进行开发,基于Python语言制作的详细教程(更新中)

    QQ开放平台官方地址:https://q.qq.com/#/app/bot QQ开放平台包含:QQ机器人、QQ小程序、QQ小游戏,我们这边选择QQ机器人。 机器人类型:设置私域机器人或者公域机器人,当然公域机器人对于服务器的要求过高,我们这边选择 私域机器人 进行开发。 特别注意在选择沙箱频道的时候

    2023年04月08日
    浏览(58)
  • QQ空间自动点赞js脚本

    F12 控制台 对于主页用以下代码 对于个人主页用以下代码 对于主页评论+点赞用以下代码 对于个人主页评论+点赞用以下代码 原理大致是访问到点赞评论相关的class,然后进行操作。 如果本博文对你有帮助,点赞收藏! 如果本博文对你有帮助,点赞收藏!

    2024年02月06日
    浏览(50)
  • 微信消息收发与微信内部emoji表情转义

    目录 微信内部emoji表情转义与消息收发 一、概述 二、常用标准emoji表情字符、微信内部转义符、unicode对照表 1、比如 2、微信聊天窗口emoji表情字符 2.1、PC端表情选择,01~03排: 2.2、PC端表情选择,04~06排: 2.3、PC端表情选择,07~09排: 2.4、PC端表情选择,10~12排: 2.5、PC端表情

    2024年02月12日
    浏览(51)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包