利用 JQuery 实现图片显隐特效

发布于：电脑网络, 转来载去 5,049 次践踏

今天又挖到一个 JQuery 特效，迫不及待用到 WordPress 上了，是一个利用 JQuery 实现图片显隐的特效，效果可以见我的评论头像，把鼠标移动上去试试看～可以看到头像会渐隐吧，在 IE、Firefox、Chrome 等各大浏览器下都是兼容的，这就是 JQuery 的魅力。

方法转自：http://www.skyoy.com/jquery-picture-hidden-effects.html

第一步：在 header.php 中加载 jquery，可以使用外链也可以内链。

外链可利用 google 提供的 JQ 库，调用格式为：

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

内链空间 jquery，把 jquery.min.js 上传到风格的 js 目录下，调用格式为：

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

第二步：在 header.php 中，添加到 </head> 前，插入代码为：

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

看到这个效果的时候我第一时间想到了用 CSS 实现，因为通过 hover 伪类也可以实现鼠标移动上图片上显隐的效果，不过唯一区别就是，JQuery 实现的显隐有渐变的过渡效果，虽然区别很微弱，不过细节绝定成败，这个 JQuery 也很小巧，何乐而不为呢？

  1. 可是你用了评论啦，这个效果就不见了，于是乎，你又把它放在了自己的脑袋上，呵呵。

  3. Pingback: 装好WP后做的一些事 | LiChao's blog

  4. Pingback: jQuery 控制字体大小切换 | 中文IT博客聚合

  7. Pingback: WordPress 主題製作學習筆記：幫你的主題加上 jQuery 特效「圖片顯隱+平滑滾動」功能

  28. 使用了，不知道会不会减慢加载的速度。本来博客流量就不大，如果还因为速度损失了访客，就杯具了！ :eek:

  37. 我也觉得你老兄很爱折腾。不过这这些小东西加起来，也许可以成就大程序呢……效果加多了，会不会产生速度呀，执行效率呀之类的影响？

  47. 这个效果只适合做技术研究用，实际效果并不能让人感觉良好，可能还影响浏览速度，其实hover也不错，就是支持的浏览器少了点，渐变效果也没有。

  53. 其实蛮好玩的说……觉得不好的都是赤果果的嫉妒！ :lol: 感觉我要被骂惨了……

  60. 这个效果我觉得反而不是太好，会让图片故意变得不清晰。。。。
    我也觉得像这些加在底部最好。。。。其实我的博客的jQuery全都在页面底部。。