WordPress侧边栏标题选中右移效果

博客刚建的时候,在某些站看到过这种效果:鼠标移到侧边栏的某行字上(文章标题、归档标题或友链),这行字会整体右移一部分。那时候要改的东西太多,一时把它忘记了,今天在博友们的网站上溜达的时候,看到了相关方法,于是立马搞来,分享给也喜欢这个效果的朋友,效果可以见本站Hi记忆

方法来自v说《分享本站标题链接平滑右移效果》,原文有两种方法实现,一种是用jQuery,另一种是用CSS3实现。作者说用jQuery兼容性较好,而CSS3对IE浏览器就有些悲剧了……于是乎就用了jQuery实现的方法,想要了解更多可去作者原文看~

第一步加载jQuery库,现在的wordpress博客主题基本上都已经加载了,可以忽略这条。

第二步把下面的代码(注意有一个地方需要修改)加到主题调用的任一js文件中。

原文代码:

 
  1. jQuery(document).ready(function($){          
  2. $('.entry-title a').hover(function() {       
  3. //.entry-title a 改成你标题的样式名称,可以应用多个链接,用逗号隔开         
  4. $(this).stop().animate({'marginLeft': '10px'}, 200);         
  5. //鼠标移动到链接上的平滑效果,200是毫秒,就是效果时间,可以改成你需要的时间         
  6. }, function() {          
  7. $(this).stop().animate({'marginLeft': '0px'}, 200);         
  8. //鼠标离开链接后的平滑效果,200同上         
  9. });          
  10. });    

注意标题的样式名称,他这里是.entry-title a,新手如我一开始试了半天,最好是用浏览器审查元素工具,看你需要右移的对象是属于哪个标签,我的是#right_col li a

Obviously...此方法不只限于Wordpress...配合标题加载效果也蛮有意思的~

青春悄然而逝,我,一路向前...

| ^_^ 本站因你的评论更精彩!

发表评论