通过背景位置的动态变换，你甚至可以做出像是用flash作出的精湛动画效果。我们可以通过这一插件实现。
有一个例子是Google.com搜索结果页的+1按钮。当鼠标移上去时，你可以看到一道闪光闪过。这其实就只是background position变换而已。
其背景图片是： 
现在你可以理解为什么可以靠背景变换实现出现一道闪光的效果了。
使用方法
首先您肯定需要引用jQuery文件。推荐使用Google jQuery API，这样比较快一点。然后要在后面引用这个插件文件：
请先到这里下载此文件（jqBackgroundPositionAnimate.js），然后再合适位置引用他：
<script type="text/javascript" src="jqBackgroundPositionAnimate.js"></script>
这之后便可以使用了。大致方法和其他的jQuery略有不同，要注意了：
$(selector).animate(
{? backgroundPosition:”1px 1px”? },
{? duration:speed,? complete: function(){}
});
其中，红色部分是可修改的，分别是选择器、背景位置、花费时间毫秒、callback函数。当然，后两者是可选的。
好了，多了也不用多说了，最好的就是自己去 http://snook.ca/archives/javascript/jquery-bg-image-animations? 这里看吧。
上一个DEMO:http://snook.ca/technical/jquery-bg/
自由转载，转载请注明： 转载自WEB开发笔记 www.chhua.com
本文链接地址: (jQuery背景位置变换) 插件-jQuery Background Position Animate http://www.chhua.com/web-note4152
评论