根据鼠标悬停显示、隐藏,回复和引用按钮

评论(21)

正如吾之所写《是授人鱼还是授人渔?》文章中提到的那样,
授人鱼,是我下段时间所要实现的目标,
今天所要提到的是,根据鼠标浮动显示、隐藏,WordPress 评论中的回复和引用按钮
因为最近刚好被问到。

鼠标悬停 显示、隐藏回复和引用按钮的思路及原理

其实我博客中特效大部分都是用 Jquery 框架去实现的,代码也大都是我写的,
原理嘛很简单,如果你阅读过一页或者两页甚至更多页 Jquery 手册的话,
那么下面的原理解释你肯定能看懂,否则请跳至代码实现区域阅读。
思路很简单,

  1. 将回复、引用按钮放置在你想要的地方,CSS 样式设置 display:none;
  2. 绑定Jquery中的hover动作到你想要鼠标悬停后显示按钮的区域

是不是很简单?要是我以前写博客肯定会就此结束,
好吧,既然授人鱼那么继续…….

特效的代码实现部分

  1. 回复、引用的HTML代码

          <div class="comment-act"><a href="#respond">回复</a> | <a href="#respond">引用</a></div>
  2. 回复、引用的CSS样式设置

          .comment-act{display:none;}
  3. Jquery( Javascript ) 代码部分
    注:li.comment 是我每一条评论所在的区域

         	$('li.comment').hover(//注1
    		function(){
    		$(this).find('div.comment-act').fadeIn(400);
    	},
    		function(){
    		$(this).find('div.comment-act').fadeOut(400);
    	});

特效的代码的加强、进阶扩展

Jquery 特效的制作往往会碰到这么一种情况,
就是有一些极端的用户,会不停的在两个有悬停动画特效的区域不停来回切换(搞测试?),
因为我们的特效显示一般都会设定一个显示时间,在这里我们设定了400毫秒,
很明显,用户的鼠标来回切换一次也就100毫秒左右,甚至更少,
不停的来回切换往往就会生成一个动画队列,即使你鼠标不动了,
特效还会按照你鼠标之前发生过的动作不停隐藏、显示,直至响应完你最后一次鼠标动作,
虽然我说的这种情况不太多见,但是如果我们的评论条数很多,
而访客又不停的上下滑动鼠标翻查内容,是不是很容易出现这种情况?
是不是很烦?
不但很烦,还会加重客户端浏览器负载,影响网站效率,更是不好的用户体验。
问题解决其实很简单,利用hover的回调函数参数终止动画队列,

     	$('li.comment').hover(//注1
		function(){
		$(this).find('div.comment-act').fadeIn(400);
	},
		function(){
		$(this).find('div.comment-act').fadeOut(400,function(){$(this).stop(true);});
	});

因为我们在移出鼠标的时候是想停止所有的动画显示,
所以我们在鼠标移出隐藏掉回复、引用按钮之后终止掉该区域的动画队列。
实测,目前为止MG12的博客未对此种情况做处理(懒?没必要?)。
你可以拿他的博客作为对比,呵呵!
注1:hover是一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,
它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

特效编写总结

如果你只是想简单使用这个功能,那么你可以就此结束,然后请慢慢享受这个功能,
如果不,请继续往下看,
我们想要写出好一点的代码就要有一定的理论基础,要有一定问题发现能力、解决能力
正如完成这个特效的编写我们需要:

  1. 有一定的 Html、CSS 代码的读写能力。
  2. 阅读 Jquery 手册,初步了解 Jquery 是什么、能做什么。
  3. 平时多看一些相关资料,我也是平时多读多看才了解了动画队列的问题,然后根据掌握知识解决问题的。
  4. 好好搭理你的博客。

稍后有空的话会把@user悬浮显示评论的原理、代码及改进整理写一篇文章,
嗯,通用版的实现起来比较麻烦,所以要好好构思一下。
That’s all.
祝你好运!





  1. @刚哥笔记
    上面的代码加在一起就可以直接实现啊。

  2. 具体怎么实施,能说详细点吗?

  3. @可可
    还好,旺还不至于。

  4. 哇,你博客人气好旺啊

  5. 效果还不错!挺好看的。可以把上一条删掉

  6. @七七
    test for 跨页浮动显示评论

  7. @wind
    我的是买的时候给分的,你没系统分区,怎么装系统?
    Win7 没研究过,有那种自动分区的软件你试试吧,
    笔记本,老婆在用着。

  8. xiang兄,你的笔记本的分区都是基本磁盘吗?我分区后CDEF盘都成了动态的了,这个有必要转成基本磁盘吗?

  9. @wind
    客气了

  10. 已实现,多谢xiang兄。

  11. @卢松松
    会者不难,难者不会,
    我也没办法,想要效果又没钱,
    只好自己个研究下了。

  12. 安装起码貌似很麻烦

  13. @XiangZi
    已回复

  14. @wind
    你的情况比较复杂,已发邮件。

  15. XiangZi :@wind 这个比较难讲清楚,具体的代码还要根据自己主题的代码调整一下,html部分放到评论样式文件里。js代码放到js文件里晚上有空的话帮你看一下。

    晚上有空的话,可以给我发邮件。

  16. @wind
    这个比较难讲清楚,
    具体的代码还要根据自己主题的代码调整一下,
    html部分放到评论样式文件里。
    js代码放到js文件里
    晚上有空的话帮你看一下。

  17. 本人很菜啊,这些个代码在什么地方加呢?

  18. @ymmcute
    哈哈,做事就要做好,要不别作!

  19. 感动于翔子孜孜不倦
    日日夜夜
    自我实现的过程…

  20. 实现起来其实并不麻烦的。

  21. 有空根据xiang兄的叙述试试。