jQuery操作,让WordPress实现图片显隐特效

WordPress建设网站的时候,当鼠标悬停到图片上时,图片变得透明,效果很炫是不是。

如何实现这一特效呢?当然要用到如日中天、功能强大的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>
温馨提示: 本文最后更新于2022/10/20 04:12:56若文章内容或图片失效,请留言联系站长反馈!
!
也想出现在这里? 联系我们
创意广告
© 版权声明
THE END
点赞0赞赏 分享
评论 抢沙发

请登录后发表评论

    请登录后查看评论内容