Heim  >  Artikel  >  Web-Frontend  >  火狐不支持backgroundPosition的js插件_html/css_WEB-ITnose

火狐不支持backgroundPosition的js插件_html/css_WEB-ITnose

WBOY
WBOYOriginal
2016-06-24 12:03:21839Durchsuche

用js backgroundPositionX,backgroundPositionY设置在firefox下无法识别,用backgroundPosition同样在火狐无法识别。要识别只能用js插件来实现的,代码如下:

/** * @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);

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

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

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

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

var a=9;

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

 
Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn