网海天涯

 blogbus新模板系统留言表情插件添加方法

   

 

这次发布的留言表情插件是我重新构思的，功能上也更加符合用户需求，表情的自定义也更加方便。下面来讲下实现方法。

 

 

Header代码块：

 <style type="text/css"> #content #commentForm div#emList {margin:15px 0 10px;} #emList img {margin:0 3px;cursor:pointer;} /* #emList {position:relative;top:-242px;left:420px;width:200px;} */ </style> <script language="javascript"> var arrEmotion = new Array(); /* arrEmotion = ["http://www.keaiq.com/pic8/xilie/62qq/biaoqing002.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing003.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing004.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing005.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing009.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing015.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing020.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing032.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing038.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing057.gif"]; */ </script> <script src="http://files.blogbus.com/addfacedemo.blogbus.com/files/12078295060.js"></script>

把上面这些代码放在header代码块中即可，自定义方法请对照看下图注。

 

注意看下图中的红线框部分，/* */ 当中的代码表示这部分代码不起作用，默认代码中，有两处代码（红线框处）被故意设置成不起作用。

默认表情效果

下面来讲下自定义表情的方法，仍然是上面的代码，需要发动的地方不多。

 

去掉两处红线框处的代码 /* */ , 这样就启用了自定义的表情，简单吧？！下面看下我自带的自定义表情效果。

自带的是悠嘻猴的表情

可能大家不想要悠嘻猴表情，下面再来看下如何更换自定义表情。

 arrEmotion = ["http://www.keaiq.com/pic8/xilie/62qq/biaoqing002.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing003.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing004.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing005.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing009.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing015.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing020.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing032.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing038.gif", "http://www.keaiq.com/pic8/xilie/62qq/biaoqing057.gif"];

修改这里的代码就可以了，代码的结构是这样的，

arrEmotion = ["图片网址1",
"图片网址2",
"图片网址3",
"图片网址4",
"图片网址5"];

图片网址的数目没有作规定，但最好不要超过20个，因为表情过多也不是件好事……请注意按照格式添加图片网址，最后一个图片网址后面没有 逗号 ！

另外还有一部分涉及到css的知识，我就不解释了，如果在应用过程中有什么问题，请留言给我。