博客刚建的时候,在某些站看到过这种效果:鼠标移到侧边栏的某行字上(文章标题、归档标题或友链),这行字会整体右移一部分。那时候要改的东西太多,一时把它忘记了,今天在博友们的网站上溜达的时候,看到了相关方法,于是立马搞来,分享给也喜欢这个效果的朋友,效果可以见本站Hi记忆。
方法来自v说《分享本站标题链接平滑右移效果》,原文有两种方法实现,一种是用jQuery,另一种是用CSS3实现。作者说用jQuery兼容性较好,而CSS3对IE浏览器就有些悲剧了……于是乎就用了jQuery实现的方法,想要了解更多可去作者原文看~
第一步加载jQuery库,现在的wordpress博客主题基本上都已经加载了,可以忽略这条。
第二步把下面的代码(注意有一个地方需要修改)加到主题调用的任一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同上
- });
- });
注意标题的样式名称,他这里是.entry-title a,新手如我一开始试了半天,最好是用浏览器审查元素工具,看你需要右移的对象是属于哪个标签,我的是#right_col li a
Obviously...此方法不只限于Wordpress...配合标题加载效果也蛮有意思的~