721 次阅读  2 条评论  发布日期:十二 30, 2011   文章位于: WordPress  

WordPress 实现图片显隐特效

下面的方法要实现一种特效:当鼠标悬停到图片上时,图片变得透明,效果很炫是不是?如何实现这一特效呢?当然要用到功能强大的 jQuery 了,很多 WordPress 主题中都有加载jquery来实现一些特效,比如滑动菜单、图片幻灯等。下面就教大家如何把这一特效加入到你的 WordPress 主题中。

首先需要在 header.php 模板中加载 jQuery,可以使用外链也可以内链。

外链可以利用google为我们提供的JS库,据说可以提高js加载速度,代码如下:

  1. <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script>  

内链的代码为:

  1. <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.min.js" ></script>  

然后再在 header.php 模板中添加:

  1. <script type="text/javascript">   
  2.    $(function () {   
  3.      $('img').hover(   
  4.        function() {$(this).fadeTo("fast", 0.5);},   
  5.        function() {$(this).fadeTo("fast", 1);}   
  6.      );   
  7.    });   
  8. </script>  

保存后,刷新一下页面看看效果如何。上面的代码是使页面中所有的图片都具有显隐特效,你也可以在上面的代码中添加选择器,让特定Div容器中的图片具有显隐特效,修改('img')为例如('.thumbnail img,.entry img')。

以上特效是当鼠标悬停在图片上时,图片变得朦胧,还有一种是鼠标悬停到图片上时,图片由朦胧变得清晰,代码如下:

  1. <script type="text/javascript">   
  2.   $(function() {   
  3.     $('img').animate({"opacity": .5 });   
  4.     $('img').hover(function() {   
  5.       $(this).stop().animate({ "opacity": 1 });   
  6.       }, function() {   
  7.       $(this).stop().animate({ "opacity": .5 });   
  8.     });   
  9.   });   
  10. </script>  

代码修改方法同上,采用哪种图片显隐特效就看你喜好了,这一特效支持所有浏览器。

转载文章请注明出处:WordPress 实现图片显隐特效

更多

2 条评论 to “WordPress 实现图片显隐特效”

  1. 分享元素 说道:

    不想再折腾了!

  2. Young Free 说道:

    要是有演示就好了。我的主题带的很多特效都没办法开启。 :arrow:

发表评论