在很多的博客上看到了,鼠标过去,文章列表标题抖动右移的效果。感觉挺炫的。我试了一下。在我的博客主题上感觉不太适合,所以没有继续用。
不过先收着吧,以后需要的时候也可以继续用。大家可以试试!
第一种方法: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/*移动距离可以自己调节*/
按以上方法改完就可以看到效果了,两种方法效果都一样,但是第一种方法能兼容所有浏览器,所以推荐使用第一种方法。
1. 本站所有资源来源于用户上传和网络,如有侵权请邮件联系站长!
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"dtmb.taobao.com",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
尚艺源码网 » wordpress文章标题链接平滑右移效果代码
2. 分享目的仅供大家学习和交流,请不要用于商业用途!
3. 如果你也有好源码或者教程,可以到用户中心发布,分享有积分奖励和额外收入!
4. 本站提供的源码、模板、插件等等其他资源,都不包含技术服务请大家谅解!
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!
7. 如遇到加密压缩包,默认解压密码为"dtmb.taobao.com",如遇到无法解压的请联系管理员!
8. 因为资源和程序源码均为可复制品,所以不支持任何理由的退款兑现,请斟酌后支付下载
声明:如果标题没有注明"已测试"或者"测试可用"等字样的资源源码均未经过站长测试.特别注意没有标注的源码不保证任何可用性
尚艺源码网 » wordpress文章标题链接平滑右移效果代码
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用?
- 本站所有资源版权均属于原作者所有,这里所提供资源均只能用于参考学习用,请勿直接商用。若由于商用引起版权纠纷,一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了?
- 你们有qq群吗怎么加入?