利用jquery实现图片显隐特效

知更鸟 WordPress3318.2K阅读模式

大家可以先看看 我博客 的效果,当鼠标悬停到图片上时,图片变得透明,效果很炫是不是。如何实现这一特效呢?当然要用到如日中天、功能强大的jquery,很多WordPress主题中都有加载jquery来实现一些特效,比如滑动菜单、图片幻灯等。下面就教大家如何把这一特效加入到你的WordPress主题中。

首先需要在header.php中加载jquery,可以使用外链也可以内链。文章源自知更鸟-https://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html

外链可以利用google为我们提供的JS库,据说可以提高js加载速度,格式如下:文章源自知更鸟-https://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html

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

内链格式为:文章源自知更鸟-https://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html

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

然后再在header.php中添加:文章源自知更鸟-https://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html

  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')。文章源自知更鸟-https://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html

上面的特效是鼠标悬停到图片上时,图片变得透明,我目前用的主题采用的就是上面代码,还有一种是鼠标悬停到图片上时,图片变得清晰,我制作的HotNews pro2.1主题随机日志缩略图采用是这种效果,代码如下:文章源自知更鸟-https://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html

  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>

代码修改方法同上,采用哪种图片显隐特效就看你喜好了,这一特效支持所有浏览器。
代码下载文章源自知更鸟-https://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html

 文章源自知更鸟-https://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html

使用热点新闻2.1主题的朋友可以直接下载替换文件就可以了文章源自知更鸟-https://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html 点此下载替换文件文章源自知更鸟-https://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html

 文章源自知更鸟-https://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html

 文章源自知更鸟-https://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html 文章源自知更鸟-https://zmingcx.com/using-jquery-to-achieve-picture-was-hidden-effects.html

weinxin
版权声明
本站原创文章转载请注明文章出处及链接,谢谢合作!
评论  33  访客  23  作者  6  引用  4
    • underone
      underone 2

      试试去…

      • 朱芳文
        朱芳文 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呢?代码该怎么修改

                                          • 知更鸟
                                            知更鸟

                                            @ Ps7isy 貌似文章中写的已很明白

                                              • Ps7isy
                                                Ps7isy 2

                                                @ 知更鸟 @知更鸟 : 只能说 – – 在我这个不懂php的人用来,还是第一个比较方便.多谢鸟哥

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

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

                                            • test
                                              test 1

                                              • 29的博客
                                                29的博客 3

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

                                                • xzymoe
                                                  xzymoe 0

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

                                                  • 轩
                                                    1

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

                                                      • peng
                                                        peng 0

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

                                                      • 鼬
                                                        3

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

                                                        • 怎样网
                                                          怎样网 1

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

                                                        匿名

                                                        发表评论

                                                        匿名网友 填写信息

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

                                                        确定