Wordpress美化:文章标题链接添加平滑右移效果

页面太平淡?不符合自己的心情?不是自己想要的效果?赶快试试本文章提供的:文章标题链接添加平滑右移效果 Wordpress美化吧!

有两个方式实现平滑右移效果喔!

 

方法One (jQuery代码)

jQuery(document).ready(function($){       
$('.entry-title a').hover(function() {    
//.entry-title a 改成你标题的样式名称,可以应用多个链接,用(半角)逗号隔开      
$(this).stop().animate({'marginLeft': '10px'}, 200);      
//鼠标移动到链接上的平滑效果,200是毫秒,就是效果时间,可以改成你需要的时间      
}, function() {       
$(this).stop().animate({'marginLeft': '0px'}, 200);      
//鼠标离开链接后的平滑效果,200同上      
});       
});

需要加载jQuery库,不用担心,现在的wordpress主题基本上都自带jQuery库了,实在不懂可以查看网页源码,通过 CTRL+F键 搜索  jquery.min.js ,将本代码,添加到 这个JS中后 刷新几下即可!

方法two(CSS3代码)

在标题的 a 属性 CSS代码 中添加:

-webkit-transition: margin 0.2s ease-out;   
-moz-transition: margin 0.2s ease-out;   
-khtml-transition: margin 0.2s ease-out;

再给这个a:hover添加:

margin-left:10px  /*移动距离可以自己调节*/

两种方法的优缺:

第一种修改JS,可以兼容所有浏览器,不适合懒wordpress站长,本人其中之一。。

第二种,修改CSS代码,不兼容IE浏览器,只有右移效果(本站忽略IE,所以不考虑)。

发表评论
加载中...
  • 微饭君 微Fan 3年前 (2014-11-14) 官方

    把a {text-decoration: none;} 改为 a {text-decoration: none;-webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -khtml-transition: margin 0.2s ease-out;} 改为把 a:hover {color: #999; text-decoration: none;} 改为 a:hover {color: #999; text-decoration: none;margin-left:10px}

    查看对话
    • NeverXqu 3年前 (2014-11-15)

      是不是少了什么 按照你的方法 改成了a {text-decoration: none;-webkit-transition: margin 0.2s ease-out; -moz-transition: margin 0.2s ease-out; -khtml-transition: margin 0.2s ease-out;}a:link {color: #333; text-decoration: none;}a:visited {color: #333; text-decoration: none;}a:hover {color: #999; text-decoration: none;margin-left:10px}没效果

    • NeverXqu 3年前 (2014-11-15)

      搞定了 搞定了!谢谢

  • NeverXqu 3年前 (2014-11-14)

    标题的a属性是什么……我的a是a {text-decoration: none;}a:link {color: #333; text-decoration: none;}a:visited {color: #333; text-decoration: none;}a:hover {color: #999; text-decoration: none;}在下面直接添加嘛?

相关文章