wordpress文章标题链接平滑右移效果代码

WP教程 欲思 1评论

在很多的博客上看到了,鼠标过去,文章列表标题抖动右移的效果。感觉挺炫的。我试了一下。在我的博客主题上感觉不太适合,所以没有继续用。

不过先收着吧,以后需要的时候也可以继续用。大家可以试试!

第一种方法:jQuery加载

优点:兼容所有浏览器,包括IE什么的。

缺点:代码也很短,没什么缺点。

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库文件,现在基本上没有主题没加载,所以第一步可以省略。

(想要知道有没有加载这个库文件的童鞋,在网页查看源代码中,搜索“jquery.min.js”,如果有就是有加载啦。)

第二步就是将这个代码粘贴到主题加载的其中一个JS文件里,就OK了。

第二种方法:CSS3效果

优点:效果一样,没啥优点。

缺点:不兼容IE浏览器,在IE下会右移,但是没有平滑效果,因为IE不支持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  /*移动距离可以自己调节*/

按以上方法改完就可以看到效果了,两种方法效果都一样,但是第一种方法能兼容所有浏览器,所以推荐使用第一种方法。

转载请注明:欲思博客 » wordpress文章标题链接平滑右移效果代码

如果你觉得这篇文章或者我分享的主题对你有帮助,请支持我继续更新网站和主题 !捐赠本站
喜欢 (6)or分享 (0)
发表我的评论
取消评论
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
(1)个小伙伴在吐槽
  1. 救命啊,代码误添加到模板函数里了 然后页面什么都没了 怎么办
    皮皮鲁2015-01-31 17:31 回复