jQuery的animate在火狐浏览器上不支持backgroundPosition的解决方法
浏览数：16 /
时间：2015年06月09日
jQuery的animate是一个非常好用的东东，但某些动画效果支持得不够好，比如backgroundPosition这种神器火狐上竟然用不了，于是我就自己写了一个。
1 /** 2 * 自定义backgroundPosition的animate，支持火狐，jQuery1.8以上版本 3 * @author Meleong 4 * v1.00 5 */ 6 (function($) { 7 $.fx.step["backgroundPosition"] = function(fx) { 8 if (typeof fx.end == ‘string‘) { 9 fx.start = getBgPos(fx.elem); 10 //fx.end原本是一个string，这里将它转换成数组，就不会再进入这个if，也方便我们下面的计算 11 //例 "0px -21px" 12 fx.end = [parseFloat(fx.end.split(" ")[0]), parseFloat(fx.end.split(" ")[1])]; 13 } 14 //这里fx.pos是根据传入的时间参数，从0到1变化的浮点数 15 var nowPosX = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit; 16 var nowPosY = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit; 17 fx.elem.style.backgroundPosition = nowPosX + ‘ ‘ + nowPosY; 18 19 /** 20 * 获取backgroundPosition数组[top, left]，没有单位 21 */ 22 function getBgPos(elem) { 23 var top = 0.0; 24 var left = 0.0; 25 if ($(elem).css("backgroundPosition")) { 26 //例 "0px -21px" 27 top = parseFloat($(elem).css("backgroundPosition").split(" ")[0]); 28 left = parseFloat($(elem).css("backgroundPosition").split(" ")[1]); 29 }else{ 30 top = parseFloat($(elem).css("backgroundPositionX")); 31 left = parseFloat($(elem).css("backgroundPositionY")); 32 } 33 return [top, left]; 34 } 35 } 36 })(jQuery);
注释写得很详细，相信大家都能看懂。下面是使用方法：
跟jQuery其他的animate的使用方法一致。例如：
1 $("#id").stop().animate({backgroundPosition : "0px -21px"}, 1000, function(){ 2 alert("动画执行完毕"); 3 })
这里只写了backgroundPosition，并没有将X和Y单独写出来，有兴趣的同学可以自己写一下，应该是比较简单的。
下面这个范例是一个backgroundPosition的动画，用div也可以做游戏（只是个走路范例，键盘↑↓←→键控制，开头的卡顿是按键机制的问题，不用理他）
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
