利用jquery实现图片显隐特效

2010年4月6日11:03:47 主题DIY 9 21,582

  大家可以先看看 我博客 的效果,当鼠标悬停到图片上时,图片变得透明,效果很炫是不是。如何实现这一特效呢?当然要用到如日中天、功能强大的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>

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

评论已关闭!

目前评论:9   其中:访客  8   博主  0   引用   1

    • xiao文 xiao文 4

      用上了. 还有没有其他特效了~

      • cuiqingyao cuiqingyao 5

        太麻烦了,算了,还是不用了

        • 旅行社报价网 旅行社报价网 0

          不错哈,学习了!

          • 皇家元林 皇家元林 0

            很简单哦!
            不过我担心会不会占用太多资源。。。

            • Yafei Yafei 1

              IE5用户表示影响不大。

              • 男科医院 男科医院 1

                这代码有什么用啊

                • dmj dmj 0

                  鸟哥的贴,必须顶

                  • 尽享网 尽享网 1

                    这个是一个很牛逼的节奏啊。

                  • 来自外部的引用: 1

                    • 百家汇博客 » 给博客图片增加点效果