设置wordpress评论框表情特效:点击评论框内和框外实现表情显现和隐藏并淡入淡出

我了个去的,都不知道怎么给标题起名了,折腾评论框到现在,纠结两种特效不能并存,那么把其中的一种单独拉出来存档下。

假如你的主题目录下已经有smiley.php文件,没有的话可网上搜索设置评论表情相关的教程,其中就有利用smiley.php文件设置自定义表情的。

第一步:一般应该都是comments.php,在里面找到调用评论表情的函数<?php include(TEMPLATEPATH . '/smiley.php'); ?>,注意smiley.php的路径,如果是在主题根目录下是这样的,我的主题比较特别,是在主题子目录下的。给这句代码添加个样式属性,修改为如下即可:



  1. <div id="smiley"><?php include(TEMPLATEPATH . '/smiley.php'); ?></div>  



第二步:就是JQuery代码了,将如下代码复制到你主题的js文件里,
友情提醒:在使用JQuery代码之前,要确认自己主题已经加载了JQuery库(现如今一般主题都已加载)



  1. $(document).ready(function () {   

  2. $("#smiley").hide();   

  3. $("#comment").focus(function() {   

  4. $("#smiley").animate({opacity: "show"}, 1000);   

  5. }).blur(function() {   

  6. $("#smiley").animate({opacity: "hide"}, 1000);   

  7. });   

  8. });  



其中“smiley”是表情函数的div的id,“comment”则是textarea的id,数字1000代表1000毫秒,点击评论框表情淡入,点击评论框外,表情淡出。

 

最后修改:2019 年 06 月 06 日 08 : 22
如果觉得我的文章对你有用,请随意赞赏

发表评论