Aug012010

jQuery实现背景图渐变切换

作者：吉心   发布：2010-08-01 09:36   分类：Jquery   阅读：1762 次   抢沙发  

链接的背景图切换一般都用CSS的HOVER来控制，虽然很方便，但效果不怎么酷，没有平滑效果，显得有点突然。在这篇文章里给大家介绍下如何用jQuery来实现一个平滑的渐变式背景切换。效果大家可以看下这个站（http://dragoninteractive.com/）。如图所示。

上面的网站在中有很多地方都应用了这种效果。看起来是不是很酷。OK，进入正题；
在这里我用一个简单的实例来分析下，先看下我们要用到的这张图。

我们把背景切换的两张图做成一张。这样的好处我以前也有说过了。详见“CSS中关于背景图的应用技巧”；接下来要做的是写结构和样式部分。

  1. body { margin: 0; padding: 0; text-align: center; }
  2.     #logo {
  3.             position: absolute;
  4.             display: block;
  5.             width: 156px;
  6.             height: 49px;
  7.             /*这部分是让元素相对浏览器垂直居中
  8.             left: 50%;
  9.             top: 50%;
  10.             margin-left: -156px;
  11.             margin-top: -49px;
  12.             -----------------------------------------*/
  13.             background: url(logo.png) top left no-repeat;
  14.             }
  15.     #logo span {
  16.             text-indent: -9999em;
  17.             /*隐藏文字，就是以图替换文字的一种方法*/
  18.             }
  19.     #logo .hover {/*这个样式是为JQ准备的*/
  20.             position: absolute;
  21.             width: 156px;
  22.             height: 49px;
  23.             top: 0;
  24.             left: 0;
  25.             background: url(logo.png) 0 -49px no-repeat;
  26.             }

这里的样式，应该不需要作解释了。很简单的一个样式！下面是结构；

  1. <a href="http://www.wopus.org/" id="wopus"><span>wopus</span></a>

关健是JQ部分，我们来看代码：

  1. jQuery(function() {
  2.         jQuery("#logo").append("<span class='hover'></span>");
  3.         //在ID为logo的标签里内部插入一个样式为hover的span
  4.         jQuery('.hover').css('opacity', 0);
  5.         //设置hover的透明度为0
  6.         jQuery('.hover').parent().hover(
  7.         function() {
  8.             jQuery('.hover').stop().animate({opacity: '1'},1000);
  9.         },
  10.         function() {
  11.             jQuery('.hover').stop().animate({ opacity: '0'},1000);
  12.         });
  13.         //这是一个JQ里常用的hover()效果。当鼠标放在class为hover的父元素上时。停止当前标签上的所有动画并执行后面的自定义效果—hover的透明度由0渐变成100%;当鼠标离开后反之。
  14.     });

看起来是不是很简单。其原理就在链接内部再插入一个元素。并通过改变这个元素的透明度来实现。有点像FLASH里的遮罩效果。最后点击下面的链接来看下效果；
http://blog.jixin.ntxz.net/jenson/blog/wp-content/uploads/Examples/tipswindown/



本文固定链接: http://www.ntxz.net/?p=1186 | 周忞 | 吉心的记事本



该日志由 吉心 于2010年08月01日发表在 Jquery 分类下， 你可以发表评论。
在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jQuery实现背景图渐变切换 | 周忞 | 吉心的记事本
关键字:
【上一篇】
【下一篇】

您可能还会对这些文章感兴趣！

  1. jquery基础教程二[伸缩、隔行变色...]
  2. jquery基础教程三[渐变效果]
  3. 关于Tab(选项卡)的一些实现方式
  4. 用jquery写一个简单的菜单伸缩效果
  5. jQuery 实现 tab 切换一例
  6. 一个jQuery弹出层(tipsWindown)

jQuery实现背景图渐变切换：等您坐沙发呢！

发表评论

您必须 [ 登录 ] 才能发表留言！