Firefox does not support the backgroundPosition js plug-in_html/css_WEB-ITnose

WBOY
Release: 2016-06-24 12:03:21
Original
831 people have browsed it

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

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

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

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

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

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

var a=9;

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

Copy after login

Related labels:
source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template