通过背景位置的动态变换,你甚至可以做出像是用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

相关笔记

更多