如何让火狐浏览器兼容background-position的animate动画？
在做背景图片滚动的动画时，一般会用到background-position-x|background-position-y，
但火狐和欧朋浏览器不支持改表示方法，只支持原生的background-position，在做此类动画的时候，由于background-position所有浏览器都支持，所以就可以放心的使用animate做背景滚动动画了.....
可是悲剧的是，jq的animate不支持background-position的表达方式，其支持background-position-x|background-position-y，所以做背景动画就成为一个难题，如何解决呢..
在网上找到了关于此类的解决方法---就是用插件，但这个插件是基于jq 1.8版本一下，所以在使用时必须用jq 1.8版本。
代码如下：
1 (function ($) { 2 3 if (!document.defaultView || !document.defaultView.getComputedStyle) { 4 5 var oldCurCSS = jQuery.curCSS; 6 7 jQuery.curCSS = function (elem, name, force) { 8 9 if (name === "background-position") { 10 11 name = "backgroundPosition"; 12 13 } 14 15 if (name !== "backgroundPosition" || !elem.currentStyle || elem.currentStyle[name]) { 16 17 return oldCurCSS.apply(this, arguments); 18 19 } 20 21 var style = elem.style; 22 23 if (!force && style && style[name]) { 24 25 return style[name]; 26 27 } 28 29 return oldCurCSS(elem, "backgroundPositionX", force) + " " + oldCurCSS(elem, "backgroundPositionY", force); 30 31 }; 32 33 } 34 35 36 37 var oldAnim = $.fn.animate; 38 39 $.fn.animate = function (prop) { 40 41 if ("background-position" in prop) { 42 43 prop.backgroundPosition = prop["background-position"]; 44 45 delete prop["background-position"]; 46 47 } 48 49 if ("backgroundPosition" in prop) { 50 51 prop.backgroundPosition = "(" + prop.backgroundPosition + ")"; 52 53 } 54 55 return oldAnim.apply(this, arguments); 56 57 }; 58 59 60 61 function toArray(strg) { 62 63 strg = strg.replace(/left|top/g, "0px"); 64 65 strg = strg.replace(/right|bottom/g, "100%"); 66 67 strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g, "$1px$2"); 68 69 var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/); 70 71 return [parseFloat(res[1], 10), res[2], parseFloat(res[3], 10), res[4]]; 72 73 } 74 75 76 77 $.fx.step.backgroundPosition = function (fx) { 78 79 if (!fx.bgPosReady) { 80 81 var start = $.curCSS(fx.elem, "backgroundPosition"); 82 83 84 85 if (!start) {//FF2 no inline-style fallback 86 87 start = "0px 0px"; 88 89 } 90 91 92 93 start = toArray(start); 94 95 96 97 fx.start = [start[0], start[2]]; 98 99 100 101 var end = toArray(fx.end); 102 103 fx.end = [end[0], end[2]]; 104 105 106 107 fx.unit = [end[1], end[3]]; 108 109 fx.bgPosReady = true; 110 111 } 112 113 114 115 var nowPosX = []; 116 117 nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0]; 118 119 nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1]; 120 121 fx.elem.style.backgroundPosition = nowPosX[0] + " " + nowPosX[1]; 122 123 }; 124 125 })(jQuery); 126 127 128 129 现在jq版本都已经发展好多版本了，加入了好多新的方法，所以如何既能用高版本的jq，还能解决background-position的问题呢》》》 130 131 132 133 134 135 完美解决： 136 137 (function($) { 138 139 $.fx.step["backgroundPosition"] = function(fx) { 140 141 if (typeof fx.end == 'string') { 142 143 fx.start = getBgPos(fx.elem); 144 145 //fx.end原本是一个string，这里将它转换成数组，就不会再进入这个if，也方便我们下面的计算 146 147 //例 "0px -21px" 148 149 fx.end = [parseFloat(fx.end.split(" ")[0]), parseFloat(fx.end.split(" ")[1])]; 150 151 } 152 153 //这里fx.pos是根据传入的时间参数，从0到1变化的浮点数 154 155 var nowPosX = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit; 156 157 var nowPosY = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit; 158 159 fx.elem.style.backgroundPosition = nowPosX + ' ' + nowPosY; 160 161 162 163 /** 164 165 * 获取backgroundPosition数组[top, left]，没有单位 166 167 */ 168 169 function getBgPos(elem) { 170 171 var top = 0.0; 172 173 var left = 0.0; 174 175 if ($(elem).css("backgroundPosition")) { 176 177 //例 "0px -21px" 178 179 top = parseFloat($(elem).css("backgroundPosition").split(" ")[0]); 180 181 left = parseFloat($(elem).css("backgroundPosition").split(" ")[1]); 182 183 } else { 184 185 top = parseFloat($(elem).css("backgroundPositionX")); 186 187 left = parseFloat($(elem).css("backgroundPositionY")); 188 189 } 190 191 return [top, left]; 192 193 } 194 195 } 196 197 })(jQuery);
