jQuery实现背景图渐变切换
周五,2009 八 28 23:07:54
链接的背景图切换一般都用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;
}
#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>wopus</span></a>
关健是JQ部分，我们来看代码：
jQuery(function() {
jQuery("#logo").append("<span class='hover'></span>");
//在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%;当鼠标离开后反之。
});
jQuery("#logo").append("<span class='hover'></span>");
//在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/
效果不错~~~~
这个网站太性感了~
我也要去学jQuery。
你好，博主！你的berrytimes.cn顶端的导航条应用了这个花哨的jquery的dragon技术，我非常佩服！
可是，我对jquery是在是门外汉，网上的教程也很难看得懂~
我在博客的style.css/ header.php 中，按照上代码加了，其中jQuery(function() 加在了header.php顶部 …. 中，但是透视度渐变的效果还是没有，
然后，我又在顶部加了：
<script type="text/javascript" src="/js/jquery.js”>
还是没有用，
博主能给出详细一点的改法吗？
不错的效果
哈哈，这个可是我的最爱，那个站太吸引眼球了，我看过不下100遍，可惜不懂JS，所以没法选择那个效果。 :B
我也不懂码字，但是那个站的颜色真的很正，很漂亮