首页 » 建站技术 » WordPress » 浏览内容

利用jquery实现图片显隐特效


2010-12-17 22:36:38 2,329 0 发表评论 字体: 作者:C.K.
标签: JqueryWordPress代码

体验版 88 元,个人版 128 元,多用户版 288元个人版160元升级到多用户版。

当鼠标悬停到图片上时,图片变得透明,效果很炫是不是。如何实现这一特效呢?当然要用到如日中天、功能强大的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’)。
    上面的特效是鼠标悬停到图片上时,图片变得透明,我目前用的主题采用的就是上面代码,还有一种是鼠标悬停到图片上时,图片变得清晰,代码如下:

    <script type=”text/javascript”>
  • $(function() {
  • $(‘img’).animate({“opacity”: .5 });
  • $(‘img’).hover(function() {
  • $(this).stop().animate({ “opacity”: 1 });
  • }, function() {
  • $(this).stop().animate({ “opacity”: .5 });
  • });
  • });
  • </script>
  • 代码修改方法同上,采用哪种图片显隐特效就看你喜好了,这一特效支持所有浏览器。

    网站统计 Statistics

    • 创建时间: 2005年1月3日 距今5064 天
    • 日志总数: 2461
    • 评论总数: 630
    • 标签总数: 654
    • 链接总数: 273
    • 最后更新: 2018-8-31 17:57:04
    • 您是本站第 14156859 位访客

    广告区 Guǎng Gào