鼠标过去,文章列表标题抖动右移的效果代码

wordpress的很多站点都添加了文章标题链接平滑右移动态效果,实现这样效果的方法很简单,在网上看了,代码也很短,试了试效果很炫,所以将代码收藏如下,以后需要的时候可以用。

A、CSS3效果实现

给你WordPress站点标题的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  /*移动距离可以自己调节*/

改完以上代码后,就可以看到你要的动态效果了。

B、jQuery加载

首先要让主题加载jQuery库文件,现在基本上所有的主题都会加载,就是在网页查看源代码中,搜索“jquery.min.js”,如果有就是加载了。

然后添加以下代码到主题加载的其中一个JS文件里,就可以了。

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同上
});
});

使用这两种方法效果都一样,但是A不兼容IE浏览器,在IE下会右移,但是没有平滑效果,因为IE不支持CSS3;B方法能兼容所有浏览器,所以推荐使用B方法。

欢迎转载,转载请注明本文链接:众推不靠谱 » 鼠标过去,文章列表标题抖动右移的效果代码

吐槽 0


  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址