码迷,mamicode.com
首页 > Web开发 > 详细

火狐不支持backgroundPosition的js插件

时间:2014-06-11 23:56:17      阅读:371      评论:0      收藏:0      [点我收藏+]

标签:style   class   blog   code   java   http   

用js backgroundPositionX,backgroundPositionY设置在firefox下无法识别,用backgroundPosition同样在火狐无法识别。
要识别只能用js插件来实现的,代码如下:
bubuko.com,布布扣
/**
 * @author Alexander Farkas
 * v. 1.02
 */
(function($) {
    $.extend($.fx.step,{
        backgroundPosition: function(fx) {
            if (fx.state === 0 && typeof fx.end == string) {
                var start = $.curCSS(fx.elem,backgroundPosition);
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
            }
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];
            fx.elem.style.backgroundPosition = nowPosX[0]+ +nowPosX[1];

           function toArray(strg){
               strg = strg.replace(/left|top/g,0px);
               strg = strg.replace(/right|bottom/g,100%);
               strg = strg.replace(/([0-9\.]+)(\s|\)|$)/g,"$1px$2");
               var res = strg.match(/(-?[0-9\.]+)(px|\%|em|pt)\s(-?[0-9\.]+)(px|\%|em|pt)/);
               return [parseFloat(res[1],10),res[2],parseFloat(res[3],10),res[4]];
           }
        }
    });
})(jQuery);
bubuko.com,布布扣

用法加一个jq库和这个插件

$(".bgpos").animate({backgroundPosition:"(-20px 94px)"},300);

$(".bgpos").css({backgroundPosition: "-20px 35px"});

如果定义一个变量方法如下:

var a=9;

$(".bgpos").animate({backgroundPosition:0+‘ ‘+a},300);



火狐不支持backgroundPosition的js插件,布布扣,bubuko.com

火狐不支持backgroundPosition的js插件

标签:style   class   blog   code   java   http   

原文地址:http://www.cnblogs.com/hxh-hua/p/3772166.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!