首页 > 其他分享 >jquery动画表情插件

jquery动画表情插件

时间:2024-12-21 17:19:46浏览次数:3  
标签:jquery 动画 插件 js ta 表情

jquery.mb.emoticons.js是一款jquery动画表情插件。它允许你通过面板拾取某个表情符号,然后可以通过这些表情相应的关键字符号将它们转换为gif动画表情。

 

在线预览    下载

 

 使用方法

在页面中引入jquery和jquery.mb.emoticons.js文件。

< script src="js/jquery.min.js">
< script src="js/jquery.mb.emoticons.js">
 HTML结构

使用一个<textarea>文本域来作为动画表情拾取的容器。

< textarea id="ta" class="ta">
 初始化插件

在页面DOM元素加载完毕之后,通过mbSmilesBox()方法即可完成该jquery动画表情插件的初始化。

$( function (){
  $( "#ta" ).mbSmilesBox();
})

如果需要将表情字符串渲染为gif动画表情,可以项下面这样操作。

< div id="render" style="display:none">
$( '#render' ).html($( '#ta' ).val()).emoticonize( true ).show();

 配置参数

该jquery动画表情插件的默认配置参数如下:

$( "#ta" ).mbSmilesBox({
  smilesPath: "" ,
  smiles: {
    "(angel)" :       "angel" ,
    " :@" :           "angry" ,
    "(bandit)" :      "bandit" ,
    "(bear)" :        "bear" ,
    "(beer)" :        "beer" ,
    " :D" :           "bigsmile" ,
    "(bow)" :         "bow" ,
    "(u)" :           "brokenheart" ,
    "(bug)" :         "bug" ,
    "(^)" :           "cake" ,
    "(call)" :        "call" ,
    "(cash)" :        "cash" ,
    "(clap)" :        "clapping" ,
    "(coffee)" :      "coffee" ,
    " 8-)" :          "cool" ,
    " ;(" :           "crying" ,
    "(dance)" :       "dance" ,
    "(devil)" :       "devil" ,
    "(doh)" :         "doh" ,
    "(drink)" :       "drink" ,
    "(drunk)" :       "drunk" ,
    "(dull)" :        "dull" ,
    "(blush)" :       "eblush" ,
    "(emo)" :         "emo" ,
    "(envy)" :        "envy" ,
    " ]:)" :          "evilgrin" ,
    "(F)" :           "flower" ,
    "(fubar)" :       "fubar" ,
    "(giggle)" :      "giggle" ,
    "(handshake)" :   "handshake" ,
    "(happy)" :       "happy" ,
    "(headbang)" :    "headbang" ,
    "(heart)" :       "heart" ,
    "(heidy)" :       "heidy" ,
    "(hi)" :          "hi" ,
    "(inlove)" :      "inlove" ,
    "(wasntme)" :     "itwasntme" ,
    "(kiss)" :        "kiss" ,
    " :x" :           "lipssealed" ,
    "(mail)" :        "mail" ,
    "(makeup)" :      "makeup" ,
    "(finger)" :      "middlefinger" ,
    "(mmm)" :         "mmm" ,
    "(mooning)" :     "mooning" ,
    "(~)" :           "movie" ,
    "(muscle)" :      "muscle" ,
    "(music)" :       "music" ,
    "(myspace)" :     "myspace" ,
    " 8-|" :          "nerd" ,
    "(ninja)" :       "ninja" ,
    "(no)" :          "no" ,
    "(nod)" :         "nod" ,
    "(party)" :       "party" ,
    "(phone)" :       "phone" ,
    "(pizza)" :       "pizza" ,
    "(poolparty)" :   "poolparty" ,
    "(puke)" :        "puke" ,
    "(punch)" :       "punch" ,
    "(rain)" :        "rain" ,
    "(rock)" :        "rock" ,
    "(rofl)" :        "rofl" ,
    " :(" :           "sadsmile" ,
    "(shake)" :       "shake" ,
    "(skype)" :       "skype" ,
    " |-)" :          "sleepy" ,
    "(smile)" :       "smile" ,
    "(smirk)" :       "smirk" ,
    "(smoke)" :       "smoke" ,
    " :|" :           "speechless" ,
    "(*)" :           "star" ,
    "(sun)" :         "sun" ,
    " :O" :           "surprised" ,
    "(swear)" :       "swear" ,
    "(sweat)" :    "sweating" ,
    "(talk)" :        "talking" ,
    "(think)" :       "thinking" ,
    "(o)" :           "time" ,
    "(tmi)" :         "tmi" ,
    "(toivo)" :       "toivo" ,
    " :P" :           "tongueout" ,
    "(wait)" :        "wait" ,
    "(whew)" :        "whew" ,
    "(wink)" :        "wink" ,
    " :^)" :          "wondering" ,
    " :S" :           "worried" ,
    "(yawn)" :        "yawn" ,
    "(yes)" :         "yes"
  },
  smilesVariations: {
    ":-)" :  "smile" ,
    ":)" :  "smile"
  },
  smileBoxBtn: "#smileBoxBtn" ,
});

 

标签:jquery,动画,插件,js,ta,表情
From: https://www.cnblogs.com/liylllove/p/18620970

相关文章

  • HTML5 tooltips工具提示jquery插件
    tooltip.js是一款HTML5tooltips工具提示jquery插件。tooltip.js可以通过js或html5data属性来实例化一个tooltip。在线预览  下载 它的特点还有:可以自定义tooltip动画。内置暗色和亮色两种主题。可以自定义文字和阴影的颜色等属性。允许动态的改变tooltip的内容。......
  • Flash动画综合设计
    Flash动画综合设计并发布、嵌入到网页 【作业要求】自己选定主题,创意制作Flash动画,并与网页进行集成【实验环境】l 所需硬件环境为微机;l 所需软件环境为Flash8.0【创意内容】 一、国旗飘荡效果 设计思路:我选择了中国国旗作为主题,想通过动态效果让国旗看起来像在风......
  • 封装一个类似jquery的$功能的方法
    在前端开发中,jQuery的$功能非常强大且方便,它允许开发者通过选择器快速获取和操作DOM元素。如果你想要封装一个类似的功能,可以使用原生的JavaScript来实现。以下是一个简单的示例,展示如何封装一个类似jQuery$函数的基础版本:(function(global){var$=function(se......
  • zenoh s3 存储插件使用
    s3存储插件可以方便的将数据持久化到对象存储中,同时基于s3插件的特点以及zenoh的能力实现方便的数据读写分离参考玩法可以将数据写入到s3中,同时对于不同的策略可以实现读写分离(可以基于数据复制以及基于zenoh的数据路由),玩法特别多参考配置zenohrouter配置{"id":"1......
  • vscode不同项目使用不同插件
    转载请注明出处:小帆的帆的博客在使用vscode开发不同项目时可能会用到不同的插件。手动管理不够优雅,本文介绍使用Profiles的方式的来管理不同项目的插件。手动管理不同项目的插件本来vscode安装了有三个插件这时需要新建一个项目,新安装了三个插件。但是新老插件之间存在......
  • jquery loading遮罩层插件
    busy-load是一款灵活的jqueryloading遮罩层插件。它可以在加载的时候为容器添加一个遮罩层,并显示loading效果。loader可以是字体图标,图片,文字等,非常灵活方便。在线预览  下载  使用方法在页面中引入jquery和busy-load相关文件。<scriptsrc="http://code.jquery.com/......
  • c4d动画怎么导出mp4视频,c4d动画视频格式设置!
    宝子们,今天来给大家讲讲C4D咋导出mp4视频的方法。通过用图文教程的形式给大家展示得明明白白的,让你能轻松理解和掌握,不管是理论基础,还是实际操作和技能技巧,都能学到,快速入门然后提升自己哦。 c4d动画MP4视频格式设置1、先把C4D的工程文件打开,然后按下键盘上的Ctrl+D,这时......
  • 无插件H5播放器EasyPlayer.js如果要达到原生播放的效果,应怎么操作?
    随着流媒体技术的迅速发展,H5流媒体播放器已成为现代网络视频播放的重要工具。其中,EasyPlayer.js播放器作为一款功能强大的H5播放器,凭借其全面的协议支持、多种解码方式以及跨平台兼容性,赢得了广泛的关注和应用。那么播放器如果想要达到原生播放的效果,我们应该怎么做呢?1、延时优......
  • 支持移动手机的纯js lightbox插件GLightbox
    GLightbox是一款支持移动手机的纯jslightbox插件。GLightbox可以支持图片,视频,内联内容和iframes等,非常强大。 在线演示 下载 使用方法在页面中引入glightbox.css和glightbox.js文件。<linkhref="glightbox.css"rel="stylesheet"><scriptsrc="glightbox.js"type=......
  • 动画图解嵌入式常见的通讯协议:SPI、I²C、UART、红外
    文章下方附学习资源,自助领取。1SPI传输 ▲图1SPI数据传输 ▲图1.2SPI数据传输(2)  ▲图1.3SPI时序信号2I²C传输  ▲图1.2.1I2C总线以及寻址方式3年嵌入式物联网学习资源整理分享:C语言、Linux开发、数据结构;软件开发,STM32单片机、ARM硬......