现在的位置: 首页 ＞Web前端＞利用jquery实现图片显隐特效

利用jquery实现图片显隐特效

发表于：2010年04月06日  分类：Web前端    14 条评论  2,431人喜欢这篇文章 

大家可以先看看 我博客 的效果，当鼠标悬停到图片上时，图片变得透明，效果很炫是不是。如何实现这一特效呢？当然要用到如日中天、功能强大的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主题的朋友可以直接下载替换文件就可以了。

点此下载替换文件

固定链接: http://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html | 知更鸟

作者: 知更鸟

该日志由 知更鸟 于2010年04月06日发表在Web前端分类下， 你可以发表评论，并在保留原文地址及作者的情况下引用到你的网站或博客。
转载请注明: 利用jquery实现图片显隐特效 | 知更鸟
标签: JQuery, Web前端, 图片特效

利用jquery实现图片显隐特效：目前有14 条留言

1. underone 说：

   2010年04月6日 于 12点58

   试试去...

   回复
2. 朱芳文 说：

   2010年04月6日 于 13点13

   我是看了，也想这么做。
   但我不隐瞒，我一点也看不懂。
   干瞪眼，羡慕！

   回复
   • 知更鸟 说：

     2010年04月6日 于 13点43

     这个没任何难度啊，只要把第一段和第三段代码粘贴到header.php文件《/head》标签前就可以了

     回复
   • 知更鸟 说：

     2010年04月6日 于 13点46

     你在用热点新闻主题，就更简单了，只把第三段加到header.php中就要可以了

     回复
3. xia 说：

   2010年04月6日 于 18点05

   我照做了，但没效果，怎么回事？

   回复
   • 知更鸟 说：

     2010年04月6日 于 18点42

     嗯，文中代码标点，需要换成英文标点，我已作了热点新闻2.1的替换文件，可以到主题发布页下载替换

     回复
4. Skyoy 说：

   2010年04月7日 于 23点56

   谢谢，已经使用了。很拉风。

   回复
5. 聆听杂志 说：

   2010年04月7日 于 23点56

   利用jquery实现图片显隐特效[转][我今天也“被”了]...

   方法转自知更鸟，实现的效果如图，当鼠标悬停到图片上时，图片变得透明。 PS：郁闷，本站被采集了。没办法，采用图片防盗链，以前会在博客中加入音乐的下载链接，以后不知道还有没有动力去放置音乐下载地址。采集估计是采用RSS获取的方式，实在没办法以后会禁用FEED，难道非得让我在进入博客前设置一道密码？如果是干净的站点转载还好，可偏偏是那些垃圾站。特烦这些垃圾站，纯粹是为了网络广告收入而建立的。其实心里一直想不通个人博客为什么非要去“盈利"，如果真能赚几百美元，也算是创汇了，可N多站点一年也才混个域名钱，...

   回复
6. L 说：

   2010年04月21日 于 14点07

   Featured Content Gallery是不是不能和这个同时使用？？谢谢！

   回复
7. 让自己博客上的图片实现鼠标移到上面显白的特效 - 灵亦rEd 说：

   2010年06月23日 于 01点20

   [...] 灵亦rEd记录学习生涯中的点点滴滴–ubuntu,c/c++,石器时代 Feed RssBlog Archiveubuntu10.10更新源Archives读者墙关于 六月 23rd, 2010让自己博客上的图片实现鼠标移到上面显白的特效 网站, by 灵亦rEd.如果你喜欢这篇文章那就请订阅我的RSS feed吧！ ↓↓常用 订阅导航↓↓♡谢谢订阅♡这个文章是参考知更鸟的利用jquery实现图片显隐特效，灵亦觉得这个特效很棒，所以就弄过来了！效果可以看灵亦的blog，把鼠标移动到图片上！是不是很酷呢？！！要实现真的很简单，只需要在header.php中的</head>前面加上<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.3.min.js"></script> <script type="text/javascript"> $(function () { $('img').hover( function() {$(this).fadeTo("fast",0.5);}, function() {$(this).fadeTo("fast",1); }); }); </script>就可以了，这个方法是利用google的JS库。如果你想要用本地内链的话，请到原贴下载！★★★★原创文章如转载，请注明本文链接: http://lingyired.com/let-your-blog-mouse-over-the-picture-to-achieve-the-above-effects-were-white/★★★★★Tags: wordpressBack Top 推荐一个RSS类插件–WWSGD，附WWSGD设置教程 [...]

   回复
8. 流氓徒 说：

   2010年08月22日 于 18点30

   我照做了也没效果，很奇怪。。。

   回复
   • 知更鸟 说：

     2010年08月22日 于 19点32

     如果代码无误，就是与主题调用的其它JS代码冲突

     回复
9. 小子 说：

   2010年08月23日 于 01点22

   请问你的这些圆角边框如何实现？为什么发布出来的２.２版本不一样呢？

   回复
10. Fanr 说：

    2010年09月1日 于 18点24

    好东东~~~

    回复