上篇 下篇

利用jquery实现图片显隐特效

2010年04月06日 ⁄ Wordpress ⁄ 评论数 29 ⁄ 被围观 11,346+

大家可以先看看 我博客 的效果，当鼠标悬停到图片上时，图片变得透明，效果很炫是不是。如何实现这一特效呢？当然要用到如日中天、功能强大的jquery，很多WordPress主题中都有加载jquery来实现一些特效，比如滑动菜单、图片幻灯等。下面就教大家如何把这一特效加入到你的WordPress主题中。
首先需要在header.php中加载jquery，可以使用外链也可以内链。
外链可以利用google为我们提供的JS库，据说可以提高js加载速度，格式如下：

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

内链格式为：

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

然后再在header.php中添加：

<script type="text/javascript">
$(function () {
$('img').hover(
function() {$(this).fadeTo("fast", 0.5);},
function() {$(this).fadeTo("fast", 1);
});
});
</script>

保存后，刷新一下页面看看效果如何。上面的代码是使页面中所有的图片都具有显隐特效，你也可以在上面的代码中添加选择器，让特定Div容器中的图片具有显隐特效，修改('img')为例如('.thumbnail img,.entry img')。
上面的特效是鼠标悬停到图片上时，图片变得透明，我目前用的主题采用的就是上面代码，还有一种是鼠标悬停到图片上时，图片变得清晰，我制作的HotNews pro2.1主题随机日志缩略图采用是这种效果，代码如下：

<script type="text/javascript">
$(function() {
$('img').animate({"opacity": .5 });

$('img').hover(function() {
$(this).stop().animate({ "opacity": 1 });
}, function() {
$(this).stop().animate({ "opacity": .5 });
});
});
</script>

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

使用热点新闻2.1主题的朋友可以直接下载替换文件就可以了。

点此下载替换文件

返回

作者: 知更鸟

该日志由 知更鸟 于669 天前发表在Wordpress分类下， 你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
转载请注明: 利用jquery实现图片显隐特效 | 知更鸟 +复制链接
关键字: JQuery, Web前端, Wordpress, 图片特效

您可能还会对这些文章感兴趣！

1. 揪出哪些插件在拖慢你的网站
2. 优化一下HotNews Pro主题SEO代码
3. 为Wordpress默认编辑器TinyMCE增加额外的按钮
4. 为WordPress编辑器设置默认内容
5. 恢复显示HotNews Pro主题图片和视频模版日志内容
6. 本地测试HotNewsPro2.7版CMS布局提示错误解决办法
7. 改变WordPress3.3后台默认显示字体
8. WordPress 3.3 版背景功能失效解决方案

目前有 29 条留言 其中：访客:19 条, 博主:6 条 引用: 4

1. underone : 2010年04月06日 669 天前 12:58:01  1楼 @回复 回复

   试试去...
2. 朱芳文 : 2010年04月06日 669 天前 13:13:36  2楼 @回复 回复

   我是看了，也想这么做。
   但我不隐瞒，我一点也看不懂。
   干瞪眼，羡慕！
   • 知更鸟 : 2010年04月06日 669 天前 13:43:20 @回复 回复

     这个没任何难度啊，只要把第一段和第三段代码粘贴到header.php文件《/head》标签前就可以了
   • 知更鸟 : 2010年04月06日 669 天前 13:46:02 @回复 回复

     你在用热点新闻主题，就更简单了，只把第三段加到header.php中就要可以了
3. xia : 2010年04月06日 669 天前 18:05:39  3楼 @回复 回复

   我照做了，但没效果，怎么回事？
   • 知更鸟 : 2010年04月06日 669 天前 18:42:55 @回复 回复

     嗯，文中代码标点，需要换成英文标点，我已作了热点新闻2.1的替换文件，可以到主题发布页下载替换
4. Skyoy : 2010年04月07日 667 天前 23:56:29  4楼 @回复 回复

   谢谢，已经使用了。很拉风。
5. L : 2010年04月21日 654 天前 14:07:09  5楼 @回复 回复

   Featured Content Gallery是不是不能和这个同时使用？？谢谢！
6. 流氓徒 : 2010年08月22日 531 天前 18:30:27  6楼 @回复 回复

   我照做了也没效果，很奇怪。。。
   • 知更鸟 : 2010年08月22日 531 天前 19:32:47 @回复 回复

     如果代码无误，就是与主题调用的其它JS代码冲突
7. 小子 : 2010年08月23日 530 天前 01:22:39  7楼 @回复 回复

   请问你的这些圆角边框如何实现？为什么发布出来的２.２版本不一样呢？
8. Fanr : 2010年09月01日 521 天前 18:24:05  8楼 @回复 回复

   好东东~~~
9. yesureadmin : 2010年11月02日 459 天前 14:50:07  9楼 @回复 回复

   在我的主题下无论如何不会成功，不知道是不是和我的图片灯箱有关
10. zhanjun : 2010年11月06日 455 天前 16:32:23  10楼 @回复 回复

    请问你现在这个主题上面的图片只要把鼠标放上去标题就跟上一个动画区块显示出来是怎么实现的？看上了这个特效，谢谢
11. 优趣 : 2010年11月15日 446 天前 18:01:48  11楼 @回复 回复

    额、这个要学习下、！
12. Ps7isy : 2011年07月03日 216 天前 21:59:57  12楼 @回复 回复

    如鸟哥所写的,我的站已经加上了..但是打开首页之后 有些浏览器看不到原本more标签之前的图片...进入一篇文章然后切换到主页才能显示..请问这是什么原因哦?
    • Ps7isy : 2011年07月04日 215 天前 11:56:52 @回复 回复

      还有鸟哥 我加上之后我站的表情还有侧边栏评论者头像啊神马的也成这样了,,,是不是需要选择特定的div呢?代码该怎么修改
      • 知更鸟 : 2011年07月04日 215 天前 12:24:43 @回复 回复

        貌似文章中写的已很明白
        • Ps7isy : 2011年07月04日 215 天前 14:11:50 @回复 回复

          @知更鸟 : 只能说 - - 在我这个不懂php的人用来,还是第一个比较方便.多谢鸟哥
13. 这个男人不坏 : 2011年09月07日 150 天前 12:18:54  13楼 @回复 回复

    嗯 试过了 不错 可是 我留言上图像也是显隐效果的呢。
    • 这个男人不坏 : 2011年09月07日 150 天前 12:22:19 @回复 回复

      嘿嘿 好了 我把js代码img前加了一个类。留言板里就好了
      • 知更鸟 : 2011年09月07日 150 天前 22:02:38 @回复 回复

        是的，可以加选择
14. test : 2011年10月20日 107 天前 11:10:05  14楼 @回复 回复

    个
15. 29的博客 : 2011年10月28日 99 天前 17:45:41  15楼 @回复 回复

    鸟哥，我来了，学习中，我发现知更鸟的主题不支持很多代码呢，国内的广告代码基本不能直接放在对应方框显示出来，需要设置js调用！求解释！
16. xzymoe : 2011年11月24日 72 天前 13:10:14  16楼 @回复 回复

    搞定了 是个好东西啊～～为什么我安装了调用谷歌那个库的插件 还是要使用第一段代码啊 按理来说插件会自动调用的