^ 回到顶部
  • 人生没有定律,每个人都有自己的节奏
  • 本站wordpress建站教程均通过实践后发布,希望对你有帮助
  • 希望你的坚持,都是因为热爱,而不是因为不甘心
  • 5年wordpress建站经验,5星服务品质
  • 那些不愿意让你吃亏的人,才是真正值得你深交的人,也是值得你付出时间的人
  • 当你决定出发,最难的就已经过去了

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

阿里云服务器9.9

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

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

<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;}

历史上的今天:
如果本文章对你有帮助,请支持下我,谢谢!

展开阅读全文

扫码关注微信公众号zs40086(微搜片)随时随地微信看片,抢先福利电影等你来

热门推荐

小雨导购

如有疑问,请前往问答中心反馈!

反馈
  1. 啪啪哒IT
    谢谢博主,我已经找到办法解决
  2. 啪啪哒IT
    那个excerpt h2的标题样式怎么看
  3. 路过打一下酱油
    有些强迫症的朋友不喜欢jquery,用css也可以达到类似的效果啊。如.title a:hover{border-left: 8px solid #fff;},根据自己网站的背景色设置好border-left的颜色,那样看起来也很不错的,也是平滑右移,我自己网站的相关文章和一些链接用的就是这种方式。
  4. 深圳国旅官网
    真实掉渣天