利用jquery实现图片显隐特效

科长

首先需要在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>

复制代码

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