因为 xiu 主题已经加载了jQuery库,所以设置就变得很简单了:
<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.php
的body
之前即可。
补一刀:
陌小雨发现 xiu 主题默认文章标题选中后有下划线,很影响美观,可以把下面代码加入style.css
文件中即可去掉:
.excerpt h2 a:hover{text-decoration:none;}
你可能对这些文章感兴趣:
- WordPress网站利用body_class()实现多种布局
- 博客文章底部的随机语言是怎么实现的?
- WordPress插件推荐:xiu主题开启ajax和全站无刷新音乐的办法
- xiu主题手机端显示侧边栏
- xiu主题的手机端和非手机端广告位后台设置是如何实现的?
- 给xiu主题添加一个浮动小人
- 分享适合xiu主题的多说评论样式
- xiu主题修改社交字符
- xiu主题给评论添加签到按钮
- xiu主题添加vip等级评论样式
- xiu主题文章版权申明优化
- 分享陌小雨博客导航外链跳转样式及xiu主题评论用户名外链修改办法
- xiu主题仿dux主题搜索弹出框,让百度站内搜索和wordpress自带搜索共存。
- 美化xiu主题Blockquote样式
如有疑问,请前往问答中心反馈!
反馈