jQuery实现背景图渐变切换

Await — Fri, 28 Aug 2009 15:07:54 +0000

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

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

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

body { margin: 0; padding: 0; text-align: center; }
   #logo {
   position: absolute;
   display: block;
   width: 156px;
   height: 49px;
   /*这部分是让元素相对浏览器垂直居中
   left: 50%;
   top: 50%;
   margin-left: -156px;
   margin-top: -49px;
   -----------------------------------------*/
   background: url(logo.png) top left no-repeat;
   }
   #logo span {
   text-indent: -9999em;
   /*隐藏文字，就是以图替换文字的一种方法*/
   }
   #logo .hover {/*这个样式是为JQ准备的*/
   position: absolute;
   width: 156px;
   height: 49px;
   top: 0;
   left: 0;
   background: url(logo.png) 0 -49px no-repeat;
   }

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

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

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

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

看起来是不是很简单。其原理就在链接内部再插入一个元素。并通过改变这个元素的透明度来实现。有点像FLASH里的遮罩效果。最后点击下面的链接来看下效果；

http://leotheme.cn/wp-content/uploads/Example/js/dragoninteractive/

2009-06-11 -- jQuery 实现 tab 切换一例 (11)
对于Tab切换，我想大家都不陌生了。现在几乎是到处可见了；今天为大家介绍下怎么用jQuery来实现一个简单的Tab切换效果。其实这类例子网上也有很多了，在这里不讨论它的实现原理，因为都是些最基本的应用...
2008-11-20 -- 增强用户体验之文章内的链接 (29)
我们在写文章的时候，难免会少不了添加一些链接。这些链接有的是指向自己的BLOG内的，有的是指向好友的BLOG，或一篇文章。指向自己BLOG的称为内部链接，指向外部的称为外部链接，我们习惯是外部链接在新...
2011-09-08 -- jQuery中queue和dequeue的用法 (1)
今天在做右下角那个静止的工具栏时遇到了一个问题。鼠标放上去的时候，要让周围的4个按钮按顺序显示出来，移开的时候要按顺序隐藏。左思右想发现用animate的回调函数方式来写比较麻烦。于是百度了下，发现j...
2011-08-17 -- Flight主题更新 (16)
这几天收到有些童鞋反应主题在wp3.2版本后台不能快速编缉文章，不能上传图片。抽空看了下，是JQ库版本冲突引起，现已更新。请移步到wopus主题站下载更新后的版本。也可以通过115网盘下载。...
2010-11-24 -- JQ弹出层插件(tipsWindow 2.8) (154)
已更新为2.7...

您可能也喜欢：
jQuery中queue和dequeue的用法	用jQuery实现个性有序列表	用jquery写一个简单的菜单伸缩效果	jQuery 实现 tab 切换一例	一个jQuery弹出层(tipsWindown)
无觅

等待-放飞梦想 » hover

jQuery实现背景图渐变切换

相关文章