今天又挖到一个 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>
$(function () {
$('img').hover(
function() {$(this).fadeTo("fast", 0.5);},
function() {$(this).fadeTo("fast", 1);
});
});
</script>
看到这个效果的时候我第一时间想到了用 CSS 实现,因为通过 hover 伪类也可以实现鼠标移动上图片上显隐的效果,不过唯一区别就是,JQuery 实现的显隐有渐变的过渡效果,虽然区别很微弱,不过细节绝定成败,这个 JQuery 也很小巧,何乐而不为呢?
-
jQuery/JavaScript 实现的异步加载图片2011年04月10日 -
JQuery 鼠标提示特效之 Sweet Titles2010年03月14日 -
JQuery 实现动感导航菜单2010年02月25日 -
JQuery 循环滚动展示 Twitter 公告2010年02月22日