标签：style blog color os 使用 io for ar art
在网页制作动画特效的时候，有时候想通过背景插入图片，然后通过控制背景显示的位置来实现一些动画效果，这样就不用使用绝对定位控制left和top来实现动画效果！但是jquery本身的动画函数是不支持背景动画的！这里就介绍通过一个动画插件来实现背景动画的效果！
代码如下！（jqBackgroundPositionAnimate.js）
/* Revision for the advanced version of jQuery. weibo.com/61557518 */ (function($) { if (!document.defaultView || !document.defaultView.getComputedStyle) { var oldCurCSS = $.curCSS; $.curCSS = function(elem, name, force) { if (name === ‘background-position‘) { name = ‘backgroundPosition‘; } if (name !== ‘backgroundPosition‘ || !elem.currentStyle || elem.currentStyle[name]) { return oldCurCSS.apply(this, arguments); } var style = elem.style; if (!force && style && style[name]) { return style[name]; } return oldCurCSS(elem, ‘backgroundPositionX‘, force) + ‘ ‘ + oldCurCSS(elem, ‘backgroundPositionY‘, force); }; } var oldAnim = $.fn.animate; $.fn.animate = function(prop) { if (‘background-position‘ in prop) { prop.backgroundPosition = prop[‘background-position‘]; delete prop[‘background-position‘]; } if (‘backgroundPosition‘ in prop) { prop.backgroundPosition = ‘(‘ + prop.backgroundPosition; } return oldAnim.apply(this, arguments); }; function toArray(strg) { strg = strg.replace(/left|top/g, ‘0px‘); strg = strg.replace(/right|bottom/g, ‘100%‘); strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2"); var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]]; } $.fx.step.backgroundPosition = function(fx) { if (!fx.bgPosReady) { var start = $.css(fx.elem, ‘backgroundPosition‘); if (!start) { start = ‘0px 0px‘; } start = toArray(start); fx.start = [start[0], start[2]]; var end = toArray(fx.end); fx.end = [end[0], end[2]]; fx.unit = [end[1], end[3]]; fx.bgPosReady = true; } var nowPosX = []; nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; fx.elem.style.backgroundPosition = nowPosX[0] + ‘ ‘ + nowPosX[1]; }; })(jQuery);
上面的代码是jquery的扩展，所以使用前先引入jquery!
使用方法如下：
$("#select").animate({backgroundPosition: ‘(0 0)‘}, {duration:300,complete: function(){
/*
动画结束执行的脚本
*/
});
$("#select").animate({backgroundPosition: ‘(left -873px)‘}, {duration:300})
//duration 速度(单位毫秒)
这个插件兼容性还是可以的，支持IE6，和其他主流的浏览器，效果还是不错的！关键是省去了很多写结构的时间，直接用背景定位来代替！
标签：style blog color os 使用 io for ar art
原文地址：http://www.cnblogs.com/shizhouyu/p/3939381.html
