必优博客

在很多的网页文章和评论中都会看到一些表情图片，这些表情图片为文章增添了很多有趣的效果，实现的方法很多，这里介绍如何使用jQuery实现把表情文字（符号）转换成表情图片，具体的效果大家应该都见过，jQuery插件Emotions使用简单，其原理基于正则的替换，就是把文字符号元素转换成图片元素，效果图如下：

点我查看Emotions在线实例
http://www.biuuu.com/demo/emtions/emotions.html

使用说明
需要使用jQuery库文件和Emotions库文件

使用实例
一，包含文件部分

1. <script src="jquery-1.3.2.min.js" type="text/javascript"></script>
2. <script src="jquery.emotions.js" type="text/javascript"></script>

二，HTML部分

1. <a href="#" id="etoggle">开启/关闭表情</a>
2. <div class="biuuu">必优博客欢迎你 :)) ，分享技术 /:) ，分享快乐 &lt;):) ，网址3个W :)] 必优 :) 点COM :(( </div>
3. <div class="biuuu">这是一个关于表情 :( 的插件，有意思 :D ，很有趣 #:-S ，很实用 =D&gt; </div>
4. <div class="biuuu">有时间多来看看 =D&gt ，学习 :-w ，交流 :-O ，分享！:-h </div>
5. <div class="biuuu">www.biuuu.com:-* </div>

主要是表情符号的应用，点击链接实现表情开启与关闭功能

三，javascript部分

1. <script>
2. $('#etoggle').click(function(){
3. if(!__emotion__cache) $('.biuuu').emotions();
4. else $('.biuuu').unemotions();
5. });
6. </script>

如上实例，有两个接口，一个开启表情接口emotions()和一个关闭表情接口unemotions()，具体表情图片和表情符号都可以自定义更换，更换表情图片只需要与指定的表情ID名称相同，当然也要注意图片的格式，默认是GIF的，emotions插件的JS代码也很简单，主要是一个表情数组，然后实现文字符号与表情符号的切换，具体应用就不说了，大家发挥自己的想象，非常实用，值得推荐。

点我查看Emotions在线实例
http://www.biuuu.com/demo/emtions/emotions.html

点我下载Emotions实例源代码
http://jquerycodes.googlecode.com/files/emtions.rar