WordPress实现JQuery鼠标放上后链接平滑移动效果

WordPress实现JQuery鼠标放上后链接平滑移动效果

作者 : 资源客 本文共565个字,预计阅读时间需要2分钟 发布时间: 2019-12-19 共218人阅读

在不少 wordpress 博客里都有链接平移的特效,就是在鼠标移动到链接上的时候,链接平滑移动,效果如下图:

下面就通过插件和代码两种方式实现这种 JQUERY 链接平移效果:

插件方式:

对于懂编程的朋友实现这个效果是非常简单的,但是对于不懂编程的站长这个插件还是非常实用的,安装即可实现链接平移效果。
1.下载插件 wp-linkmove,下载后解压。
2. 把整个文件上传到/wp-content/plugins/ 目录。
3.在后台激活插件即可,请看插件截图:

代码方式:

同样通过修改代码方式实现链接平移效果也很简单,首先要确保已经加载文章开关所说的 JQuery 库。
1.在所用主题的 style.css 文件里添加下面一句代码(这是全站链接应用,如果只想部分链接应用,于其前面加入其它控制符):

a{position:relative;} 

2.在主题所调用的 .js 文件里加入以下代码:

jQuery(document).ready(function($){ 
$('a').hover(function() { 
$(this).stop().animate({'left': '5px'}, 'fast'); 
}, function() { 
$(this).stop().animate({'left': '0px'}, 'fast'); 
}); 
}); 

OK,大功告成,快去看看效果吧!

1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途及非法用途,否则后果自负!
3. 如果你也有好源码或者教程,可以到审核区发布,分享有金币奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"qq301.com",如遇到无法解压的请联系管理员!
资源客是一个优秀的分享资源站,本站资源均为各位友友分享而来,特殊原创会标明如有侵犯版权等可联系26628394@qq.com 删除

资源客 » WordPress实现JQuery鼠标放上后链接平滑移动效果