jQuery的animate在火狐浏览器上不支持backgroundPositionX的解决方法
在网上找的ffSupp.js文件
/** * 自定义backgroundPosition的animate,支持火狐,jQuery1.8以上版本 * @author Meleong * v1.00 */ (function($) { $.fx.step["backgroundPosition"] = function(fx) { if (typeof fx.end == 'string') { fx.start = getBgPos(fx.elem); //fx.end原本是一个string,这里将它转换成数组,就不会再进入这个if,也方便我们下面的计算 //例 "0px -21px" fx.end = [parseFloat(fx.end.split(" ")[0]), parseFloat(fx.end.split(" ")[1])]; } //这里fx.pos是根据传入的时间参数,从0到1变化的浮点数 var nowPosX = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit; var nowPosY = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit; fx.elem.style.backgroundPosition = nowPosX + ' ' + nowPosY; /** * 获取backgroundPosition数组[top, left],没有单位 */ function getBgPos(elem) { var top = 0.0; var left = 0.0; if ($(elem).css("backgroundPosition")) { //例 "0px -21px" top = parseFloat($(elem).css("backgroundPosition").split(" ")[0]); left = parseFloat($(elem).css("backgroundPosition").split(" ")[1]); }else{ top = parseFloat($(elem).css("backgroundPositionX")); left = parseFloat($(elem).css("backgroundPositionY")); } return [top, left]; } } })(jQuery);
在animate.html中这样写(部分代码)
<body> <script src="jquery-1.11.3.js"></script> <script language="javascript"> for(var j0=0;j0<5;j0++){ var juli0=j0*29*(-1)+"px"; var juli00="0px"+"\u0020"+juli0; $("#num"+(j0+1)).animate({ backgroundPosition:juli00}, 1500);} </script> <script src="ffSupp.js"></script> </body>