利用jquery实现图片显隐特效

知更鸟
知更鸟
知更鸟
1551
文章
6920
评论
2010年4月6日10:59:23 33 18.1K

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

上面的特效是鼠标悬停到图片上时,图片变得透明,我目前用的主题采用的就是上面代码,还有一种是鼠标悬停到图片上时,图片变得清晰,我制作的HotNews pro2.1主题随机日志缩略图采用是这种效果,代码如下:

  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>

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

 

利用jquery实现图片显隐特效

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

点此下载替换文件

 

利用jquery实现图片显隐特效

weinxin
版权声明
本站原创文章转载请注明文章出处
WordPress 文章ID连续 WordPress

WordPress 文章ID连续

最近总是有用户问,网站只有几十个文章,为什么文章ID却排到几千数字?一般有这个问题者是使用这种固定链接形式: /%post_id%.html 可能WordPress设计之初,就没考虑过这个问题,图片附...
WordPress 页面为什么没有评论留言模块 WordPress

WordPress 页面为什么没有评论留言模块

新建页面为什么没有评论留言模块?经常有新手问我这个问题,这是因为WordPress页面默认没有勾选“允许评论”,需要手动操作。 区块编辑器,创建页面时,在左侧勾选“允许评论”。 这个问题主要集中在使用...
匿名

发表评论

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

评论:33   其中:访客  23   博主  6   引用   4
    • underone underone 3

      试试去…

      • 朱芳文 朱芳文 4

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

          • 知更鸟 知更鸟

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

            • 知更鸟 知更鸟

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

            • xia xia 0

              我照做了,但没效果,怎么回事?

                • 知更鸟 知更鸟

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

                • Skyoy Skyoy 1

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

                  • L L 0

                    Featured Content Gallery是不是不能和这个同时使用??谢谢!

                    • 流氓徒 流氓徒 0

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

                        • 知更鸟 知更鸟

                          @ 流氓徒 如果代码无误,就是与主题调用的其它JS代码冲突

                        • 小子 小子 1

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

                          • Fanr Fanr 0

                            好东东~~~

                            • yesureadmin yesureadmin 3

                              在我的主题下无论如何不会成功,不知道是不是和我的图片灯箱有关

                              • zhanjun zhanjun 0

                                请问你现在这个主题上面的图片只要把鼠标放上去标题就跟上一个动画区块显示出来是怎么实现的?看上了这个特效,谢谢

                                • 优趣 优趣 2

                                  额、这个要学习下、!

                                  • Ps7isy Ps7isy 2

                                    如鸟哥所写的,我的站已经加上了..但是打开首页之后 有些浏览器看不到原本more标签之前的图片…进入一篇文章然后切换到主页才能显示..请问这是什么原因哦?

                                      • Ps7isy Ps7isy 2

                                        @ Ps7isy 还有鸟哥 我加上之后我站的表情还有侧边栏评论者头像啊神马的也成这样了,,,是不是需要选择特定的div呢?代码该怎么修改

                                      • 这个男人不坏 这个男人不坏 1

                                        嗯 试过了 不错 可是 我留言上图像也是显隐效果的呢。

                                        • test test 1

                                          • 29的博客 29的博客 3

                                            鸟哥,我来了,学习中,我发现知更鸟的主题不支持很多代码呢,国内的广告代码基本不能直接放在对应方框显示出来,需要设置js调用!求解释!

                                            • xzymoe xzymoe 0

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

                                              • 轩 1

                                                我用了这个特效,经过测试PNG图片在IE8上会变得很难看,不知道你是怎么解决的,谢谢解答。(初步观察你是过滤掉了PNG,想问下怎么实现的)

                                                  • peng peng 0

                                                    @ 找了好几个插件,,顶一个

                                                  • 鼬 3

                                                    博主,不知到为什么我不能实现和你一样的效果,首先序号都在竖条的后面,然后代码会偶尔空一行,留言中的切换到可视化再发表已经用过。请博主指教。

                                                    • 怎样网 怎样网 1

                                                      你好,使用了这个效果感觉不如您的网站这个效果好看,不知能否透露下代码,谢谢~~