分享各种网络资源
是我乃至整个互联网的精髓所在
 您目前所在位置: 站点首页 » WordPress » WordPress 代码 » WordPress 链接鼠标悬停右移效果
  • WordPress 链接鼠标悬停右移效果

  • 内容来源
  • 实践过程
  • 折腾过程
  • 峰回路转
  • 总结
  • 实现功能
  • WordPress 链接鼠标悬停右移效果-BanYuner

    内容来源

    内容来源:http://www.timle.cn/wordpress-link-move.html

    实践过程

    一开始看到这个的时候,就是想尝试一下,看看是什么样子的,虽然看了演示图,但是感觉自己不实践一下是不知道什么情况的,于是我的体验之路就开始了.本来是很简单的两段代码,一个是通过CSS来加载的,一个是通过js来加载的,根据原作者说的,js的要比css的顺滑不少,于是乎,我就选择了js代码进行尝试了,可是问题来了,文章作者并没有说代码添加到哪里,对于我这个小白,我有点混乱了,代码虽好,但是你不告诉我添加到哪里,这怎么搞

    折腾过程

    于是我就开始折腾了,首先观察代码,开始的头部jQuery这个关键词,于是我找到了include目录下,有个js的目录,正好有这么一个单独的文件,但是添加到文件中的哪个部分呢,我还是不知道,于是我就不断尝试,头部,中间,尾部,均无果,后来百度了一下为什么添加js代码没有效果,有一篇文章说是因为$符号的问题,要替换这个符号为jQuery,于是乎,我也进行替换了,还是没有效果.自尝试了很多次自后,我放弃了,想着这段代码方正也是很少,作用并不是很大,就直接保存书签不管了

    峰回路转

    今天回家之后,又打开了这个书签,简单的看了一下,然后灵光一闪,是不是根本就不应该添加到那个文件中呢,这个效果是实现归档页面右移的作用的,那么应该是基于归档页面的代码啊.就这样,我开始操作了,FTP下载了归档页面的文件,开始找,找到了一个script,我把代码尝试性的丢在这个之前,覆盖站点文件,刷新网页,有效果了.就这样,这个代码被我利用起来了

    总结

    首先根据这个情况,我个人总结出几个问题:
    一:代码这个东西是很神奇的,添加的位置不一样或者不对,要么没效果,要么就是排版乱了
    二:在不知道代码应该添加到哪里的情况下,我们可以进行不断尝试,但是一定要做好文件的备份工作
    三:有时候,如果一个事情你无法解决并不是你的智商或者能力问题,可能是有一定的运气以及你的脑袋瓜子是不是发热的问题

    实现功能

    这里我就附上代码,大家可以自己尝试一下:

    jQuery(document).ready(function($){
    $('.archives a').hover(function() {
    /*.archives a 改成你标题的样式名称,可以应用多个链接,用英文逗号隔开*/
    $(this).stop().animate({'marginLeft': '10px'}, 200);}, function() {
    $(this).stop().animate({'marginLeft': '0px'}, 200);
    });
    });
    

    打赏 分享此文

    扫码,支持我

    WordPress 链接鼠标悬停右移效果

    支付宝(点击图片切换)

    扫码,支持我

    WordPress 链接鼠标悬停右移效果

    微信(点击图片切换)

    扫码,手机看

    WordPress 链接鼠标悬停右移效果
    WordPress 链接鼠标悬停右移效果
    1 + 2 =
    1. 1楼
      Timle.CN
      最后评论时间:2015/10/17 16:36
      来自天朝的朋友 谷歌浏览器 Windows 10 四川省成都市 电信
      $('.archives a').hover(function()改为:$('.archives a,.widget, .widget a,.entry-title a').hover(function()试试,记得把js代码添加到全局js里面。
      Timle.CN 2年前 (2015-10-17)回复
      • 帅气小琦琦
        最后评论时间:2017/12/16 23:21
        来自天朝的朋友 谷歌浏览器 Windows 10 湖北省武汉市 电信
        这样的话,很多地方都可以位移了,效果更佳 :lol:
        帅气小琦琦    7小时前回复