兜兜转转,回归初恋,欢迎使用yusiyuhuo主题, 主题介绍>>>

xiu主题实现鼠标悬停文章标题向右滑动特效

WordPress建站 陌小雨 4152℃ 0评论

因为xiu主题已经加载了jQuery库,所以设置就变得很简单了:

效果图:
20150305225522

<script>
/*-------------------------------------------------*/     
/*  为文章标题链接添加平滑右移效果
/*-------------------------------------------------*/    
jQuery(document).ready(function($){   
$('.excerpt h2').hover(function() {   
//.excerpt h2 改成你标题的样式名称,可以应用多个链接,用逗号隔开   
$(this).stop().animate({'marginLeft': '10px'}, 200);   
//鼠标移动到链接上的平滑效果,200是毫秒    
}, function() {   
$(this).stop().animate({'marginLeft': '0px'}, 200);   
//鼠标离开链接后的平滑效果    
});   
});   
/*-------------------------------------------------*/     
/*  为文章标题链接添加动态加载效果
/*-------------------------------------------------*/    
$(document).ready(function(){   
$('.excerpt h2').click(function(){   
//同上,注意修改.excerpt h2为你自己的样式   
$(this).text('正在给力加载中...');   
//加载中文本提示,可修改为你喜欢的,如Loading...   
window.location = $(this).attr('href');   
});   
});
</script>

代码使用方法:

将上述代码加到主题footer.phpbody之前即可。

补一刀:

陌小雨发现xiu主题默认文章标题选中后有下划线,很影响美观,可以把下面代码加入style.css文件中即可去掉:

.excerpt h2 a:hover{text-decoration:none;}

转载请注明:小雨科技 _武汉网站建设_武汉小程序搭建 » xiu主题实现鼠标悬停文章标题向右滑动特效

喜欢 (0)
发表我的评论
取消评论
表情

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

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