WordPress中鼠标悬停显示和隐藏评论及引用按钮的实现


Posted in Javascript onJanuary 12, 2016

根据鼠标悬停显示、隐藏,回复和引用按钮
思路及原理
原理嘛很简单,如果你阅读过一页或者两页甚至更多页 Jquery 手册的话,
那么下面的原理解释你肯定能看懂,否则请跳至代码实现区域阅读。
思路很简单,

将回复、引用按钮放置在你想要的地方,CSS 样式设置 display:none;
绑定Jquery中的hover动作到你想要鼠标悬停后显示按钮的区域
是不是很简单?要是我以前写博客肯定会就此结束,
好吧,既然授人鱼那么继续…….

特效的代码实现部分
回复、引用的HTML代码

      <div class="comment-act"><a href="#respond">回复</a> | <a href="#respond">引用</a></div>
回复、引用的CSS样式设置
.comment-act{display:none;}
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是一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法。这是一个自定义的方法,
它为频繁使用的任务提供了一种“保持在其中”的状态。
当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。当鼠标移出这个元素时,会触发指定的第二个函数。

显示、隐藏评论者信息
这个功能很多主题都有,旨在减小页面篇幅、提高用户体验,我的这个主题本来也是预留了这个功能,但是因为鄙人懒所以一直没有改造。最近这阵子小恙再加上本来也懒所以也一直没有折腾博客,觉得再不折腾折腾博客兴许就这么闲下来了。

望高手指正
JS代码如下:

var cmtinfo = jQuery('#cmtinfo');
if (cmtinfo.length>0){
var hideinfo = cmtinfo.find('#hide_author_info');
var showinfo = cmtinfo.find('#show_author_info');
var authorinfo = jQuery('#author_info');
authorinfo.hide();
showinfo.click(function(){jQuery(this).fadeOut(function(){hideinfo.fadeIn();});authorinfo.fadeIn();});
hideinfo.click(function(){jQuery(this).fadeOut(function(){showinfo.fadeIn();});authorinfo.fadeOut();});
}

#cmtinfo 是有信息的访客所显示访客新的一个 DIV

#hide_author_info、#show_author_info 一个是隐藏按钮一个是显示按钮

#author_info 是 #cmtinfo 的一个子 DIV
Javascript 相关文章推荐
DEFER怎么用?
Jul 01 Javascript
jQuery学习4 浏览器的事件模型
Feb 07 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
Jan 26 Javascript
jQuery绑定事件on()与弹窗的简要概述
Apr 27 Javascript
js实现文字截断功能
Sep 14 Javascript
基于bootstrap按钮式下拉菜单组件的搜索建议插件
Mar 25 Javascript
JavaScript模拟实现封装的三种方式及写法区别
Oct 27 Javascript
webpack本地开发环境无法用IP访问的解决方法
Mar 20 Javascript
vue日历/日程提醒/html5本地缓存功能
Sep 02 Javascript
微信小程序实现搜索功能
Mar 10 Javascript
es6函数之尾调用优化实例分析
Apr 25 Javascript
WordPress中利用AJAX技术进行评论提交的实现示例
Jan 12 #Javascript
基于JavaScript实现div层跟随滚动条滑动
Jan 12 #Javascript
JavaScript继承模式粗探
Jan 12 #Javascript
轻松实现Bootstrap图片轮播
Apr 20 #Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 #Javascript
学习JavaScript设计模式之策略模式
Jan 12 #Javascript
基于jQuery1.9版本如何判断浏览器版本类型
Jan 12 #Javascript
You might like
php实现水仙花数的4个示例分享
2014/04/08 PHP
php中HTTP_REFERER函数用法实例
2014/11/21 PHP
php+xml实现在线英文词典查询的方法
2015/01/23 PHP
php 中的closure用法详解
2017/06/12 PHP
IE与firefox下Dhtml的一些区别小结
2009/12/02 Javascript
jquery入门—编写一个导航条(可伸缩)
2013/01/07 Javascript
js中的referrer返回上一页使用介绍
2013/09/26 Javascript
javascript实现无限级select联动菜单
2015/01/02 Javascript
JavaScript中的this关键字使用详解
2015/08/14 Javascript
JS实现状态栏跑马灯文字效果代码
2015/10/24 Javascript
基于html5和nodejs相结合实现websocket即使通讯
2015/11/19 NodeJs
js获取鼠标位置实例详解
2015/12/09 Javascript
实例详解Nodejs 保存 payload 发送过来的文件
2016/01/14 NodeJs
canvas实现流星雨的背景效果
2017/01/13 Javascript
详解vue的数据binding绑定原理
2017/04/12 Javascript
详解小程序之简单登录注册表单验证
2019/05/13 Javascript
javascript实现点击小图显示大图
2020/11/29 Javascript
[49:56]VG vs Optic 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
利用Python开发实现简单的记事本
2016/11/15 Python
python中logging库的使用总结
2017/10/18 Python
python+Splinter实现12306抢票功能
2018/09/25 Python
对Python中一维向量和一维向量转置相乘的方法详解
2019/08/26 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
python3光学字符识别模块tesserocr与pytesseract的使用详解
2020/02/26 Python
Pycharm中切换pytorch的环境和配置的教程详解
2020/03/13 Python
Python如何将模块打包并发布
2020/08/30 Python
澳大利亚宠物商店:Petbarn
2017/11/18 全球购物
BISSELL官网:北美吸尘器第一品牌
2019/03/14 全球购物
最新大学职业规划书范文
2013/12/30 职场文书
煤矿机修工岗位职责
2014/02/07 职场文书
会议主持词
2014/03/17 职场文书
我与祖国共奋进演讲稿
2014/09/13 职场文书
校运会通讯稿
2015/07/18 职场文书
吧主申请感言怎么写
2015/08/03 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python