兼容火狐浏览器，jq animate backgroundPosition

最新推荐文章于 2021-08-04 09:53:51 发布

青_zq

最新推荐文章于 2021-08-04 09:53:51 发布

阅读量1.4k

点赞数

CC 4.0 BY-SA版权

分类专栏： web 文章标签：插件 firefox 动画代码 background

本文链接：https://blog.youkuaiyun.com/xtgefzhangqing/article/details/48780513

web 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一个自定义的backgroundPosition插件，旨在解决Firefox浏览器中background-position属性不完全支持的问题，通过调整代码使其兼容各种背景位置设置，并展示了如何在jQuery中使用此插件实现动画效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

animate 是jq的一个非常好，用的一个动画效果的一种方法。但火狐浏览器中 background-position-y、background-position-x、还有jq的 backgroundPosition不完善。如是就想修改一个backgroundPosition插件来兼容。

backgroundPosition 插件代码

(function($) {
    $.extend($.fx.step,{
        backgroundPosition: function(fx) {
            if (typeof fx.start == "number" && typeof fx.end == 'string') {
                var start = $.css(fx.elem,'backgroundPosition');
                start = start.split("px");
                if (start[2] == undefined) {
                    start = start[0].split("%");
                }
                fx.start = [parseInt(start[0]), parseInt(start[1])]

                var end = fx.end.split("px");
                fx.end = [parseInt(end[0]),parseInt(end[1])];

            }

            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + "px";
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + "px";

            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];

        }
    });
})(jQuery);

使用方法

$(this).animate({"backgroundPosition": "0px 50px"},200);