[译]使用JQUERY让背景图像变得动感

原文：USING JQUERY FOR BACKGROUND IMAGE ANIMATIONS

在阅读了Dave Shea's的文章 CSS Sprites using jQuery来建立动态效果,我发现我喜欢摆弄一些仅仅使用很少的html结构和代码（不需要添加额外的标记）来达到所需的目的。

改变图像背景的位置是一个我发现的建立动感效果很好的的方法。(我并不是第一个这样认为的: 看文章底部的例子).

jQuery是个非常伟大的library让你能够立即使用完成这样的工作,这不能让背景适当的动起来因为他需要两个值而不是一个(更糟糕的是并不是所有的浏览器都想ie一样执行非标准的背景坐标). 直到最近的版本 (1.0.2 写作的时候)  Background-Position plugin. 先前的版本不能恰当的支持负数或者是小数属性.

HTML

没有人喜欢添加额外的HTML来增加代码的臃肿，所以，我们看一个非常简单的无序列表：

<ul>
　　<li><a href="#">Home</a></li>
　　<li><a href="#">About</a></li>
　　<li><a href="#">Contact</a></li>
</ul>

CSS

对于这个,我仅仅是对导航栏做了浮动并且对链接做了block和padding处理 .没有装饰 (下边是整个代码).

ul   { list-style:none;  margin:0;  padding:0;}
li   { float:left;  width:100px;  margin:0;  padding:0;  text-align:center;}
li a { display:block;  padding:5px 10px;  height:100%;  color:#FFF;  text-decoration:none;  border-right:1px solid #FFF;}
li a { background:url(bg.jpg) repeat 0 0;}
li a:hover {background-position:50px 0;}

注意 hover 状态已经声明. 用户访问并不需要js支持,至少, 能看到最后的装提案.我已经在 li a 上单独声明了背景以便独立,但是初始化背景的位置需要设置以便你想做特效。

Image

你可以利用不同的图片做出不同的特效.

图像1：重击

在图像1中,开始和结束的状态在左边和右边，但是很简单的倾斜可以做出非常美妙的效果。

图像2：渐变

图像2是非常精细的. 大量的可视化空白在普通和划过状态下在图像的头部和底部。大量大渐变当划过的时间在中间制造出淡入淡出的效果。渐变越大，就感觉淡入淡出效果越接近真实的效果.

图片色泽的单一程度会使图片变得很小,同时. 但是复杂的动作常常需要更多的色深和大一点的文件作为支持。通常表现和应用要做到一个平衡。

查看 demo page 来看这结果是怎么工作的 (每个有2个例子).

Script

最后，这脚本来实现这个效果但是很简单的Finally,当鼠标划入划出的时候会出现这些效果。

$('#nav a').css( {backgroundPosition: "0 0"} )
.mouseover(function(){$(this).stop().animate({backgroundPosition:"(0 -250px)"},{duration:500})})
.mouseout(function(){$(this).stop().animate({backgroundPosition:"(0 0)"},{duration:500})})

元素经过 $ function被抓取并且给了一个默认的css。 这是在ie和ff2中是必须的, 如果不声明默认值. 在IE中, 你可以使用background-position-x 和 -y来规避错误，但是更简单的方法是在脚本的初始值中初始化这些属性。

然后元素就在鼠标经过和划出时候执行特效。

关键问题在于动态效果在试图开始的时候已经结束。这避免了鼠标重复的进出元素的时候特效延迟显示的问题。

jQuery同样有个hover方法代替单独使用mouseover和mouseout方法. 这方法我不赞同是因为我喜欢在使用的时候清楚的声明他们。 hover 方法有两个参数：需要在鼠标划过时候运行的函数和鼠标离开时候运行的函数。

Demo

 the demo page,我建立了4个不同的效果，你可以查看源文件来看他们是怎样运行的。

转载于:https://www.cnblogs.com/imvkmark/archive/2009/11/05/2291506.html