wordpress网站文章标题加载特效和平滑移动特效js代码[免插件]

摘要

鼠标放到文章标题上悬停,文章标题具有平滑移动的特效,看起来网站很具有动感,本文分享实现这个简单js特效的代码以及使用方法,爱折腾的网站建设者可以拿过去使用!

在张戈博客看到这个特效,自己就喜欢了,便自己琢磨参考别人的代码,给自己网站也增加了这个小特效。这个功能有插件实现,不过一般都倡导少用插件加速度的理念,所以就简单把这个代码使用分享一下,喜欢的朋友可以拿去自定义折腾,js特效代码如下:

  1. /*-------------------------------------------------*/  
  2. /*  为文章标题链接添加动态载入效果 
  3. /*-------------------------------------------------*/  
  4. $(function() {  
  5.     $('.entry-title a').click(function(e) {  
  6.         e.preventDefault();  
  7.         var htm = '极速加载中...',  
  8.         i = 4,  
  9.         t = $(this).html(htm).unbind('click'); (function ct() {  
  10.             i < 0 ? (i = 4, t.html(htm), ct()) : (t[0].innerHTML += '.',  
  11. i--, setTimeout(ct, 150))  
  12.         })();  
  13.         window.location = this.href  
  14.     })  
  15. });  
  16. /* 文章标题平移效果*/  
  17. jQuery(document).ready(function($){   
  18. $('.list-title a ,.entry-title a,.nav-single a,.widget ul li a').hover(function() {   
  19. $(this).stop().animate({'left': '10px'}, 'fast');   
  20. }, function() {   
  21. $(this).stop().animate({'left': '0px'}, 'fast');   
  22. });   
  23. });   

把js代码复制添加到自己网站主题的任意一个加载使用的js代码文件中即可。
然后在网站主题style.css中增加以下代码:

  1. .list-title a,.entry-title a,.nav-single a,.widget ul li a{position:relative;}  

刷新几下网站缓存,鼠标放在标题上,看看实现的平滑效果吧!
【说明】
1.标题加载特效不需要css文件中定义即可起效。
2.平滑移动的文章标题a标签可以自行控制增加或者去除控制指定的a标签。

发表评论

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen: