jQuery的animate在火狐浏览器上不支持backgroundPosit

页面导航:首页 > 网络编程 > JavaScript > jQuery的animate在火狐浏览器上不支持backgroundPosit

jQuery的animate在火狐浏览器上不支持backgroundPosit

来源: 作者: 时间:2016-02-02 09:59 【

jQuery的animate是一个非常好用的东东,但某些动画效果支持得不够好,比如backgroundPosition这种神器火狐上竟然用不了,于是我就自己写了一个。1 **2 * 自定义backgroundPosition的animate,支持火
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也可以做游戏(只是个走路范例,键盘↑↓←→键控制,开头的卡顿是按键机制的问题,不用理他)
Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<