JQuery 视差滑块在 Firefox 中损坏
Posted
技术标签:
【中文标题】JQuery 视差滑块在 Firefox 中损坏【英文标题】：JQuery parallax slider broken in Firefox 【发布时间】：2017-05-17 18:24:14 【问题描述】：我的 Wordpress 网站上有一个滑块，它将不再在 Firefox 49 或 50 上加载。加载指示器出现但不会动画或显示和滑动。在 Chrome 和 IE 中运行良好。下面是JQuery。为什么这会在新版本的 Firefox 中中断？
(function($)$.fn.activity=function(opts)this.each(function()var $this=$(this);var el=$this.data("activity");if(el)clearInterval(el.data("interval"));el.remove();$this.removeData("activity");if(opts!==false)opts=$.extend(color:$this.css("color"),$.fn.activity.defaults,opts);el=render($this,opts).css("position","absolute").prependTo(opts.outside?"body":$this);var h=$this.outerHeight()-el.height();var w=$this.outerWidth()-el.width();var margin=top:opts.valign=="top"?opts.padding:opts.valign=="bottom"?h-opts.padding:Math.floor(h/2),left:opts.align=="left"?opts.padding:opts.align=="right"?w-opts.padding:Math.floor(w/2);var offset=$this.offset();if(opts.outside)el.css(top:offset.top+"px",left:offset.left+"px");elsemargin.top-=el.offset().top-offset.top;margin.left-=el.offset().left-offset.left;el.css(marginTop:margin.top+"px",marginLeft:margin.left+"px");animate(el,opts.segments,Math.round(10/opts.speed)/10);$this.data("activity",el););return this;;$.fn.activity.defaults=segments:12,space:3,length:7,width:4,speed:1.2,align:"center",valign:"center",padding:4;$.fn.activity.getOpacity=function(opts,i)var steps=opts.steps||opts.segments-1;var end=opts.opacity!==undefined?opts.opacity:1/steps;return 1-Math.min(i,steps)*(1-end)/steps;;var render=function()return $("<div>").addClass("busy");;var animate=function();function svg(tag,attr)var el=document.createElementNS("http://www.w3.org/2000/svg",tag||"svg");if(attr)$.each(attr,function(k,v)el.setAttributeNS(null,k,v););return $(el);if(document.createElementNS&&document.createElementNS("http://www.w3.org/2000/svg","svg").createSVGRect)render=function(target,d)var innerRadius=d.width*2+d.space;var r=(innerRadius+d.length+Math.ceil(d.width/2)+1);var el=svg().width(r*2).height(r*2);var g=svg("g","stroke-width":d.width,"stroke-linecap":"round",stroke:d.color).appendTo(svg("g",transform:"translate("+r+","+r+")").appendTo(el));for(var i=0;i<d.segments;i++)g.append(svg("line",x1:0,y1:innerRadius,x2:0,y2:innerRadius+d.length,transform:"rotate("+(360/d.segments*i)+", 0, 0)",opacity:$.fn.activity.getOpacity(d,i)));return $("<div>").append(el).width(2*r).height(2*r);;if(document.createElement("div").style.WebkitAnimationName!==undefined)var animations=;animate=function(el,steps,duration)if(!animations[steps])var name="spin"+steps;var rule="@-webkit-keyframes "+name+" ";for(var i=0;i<steps;i++)var p1=Math.round(100000/steps*i)/1000;var p2=Math.round(100000/steps*(i+1)-1)/1000;var value="% -webkit-transform:rotate("+Math.round(360/steps*i)+"deg); \n";rule+=p1+value+p2+value;rule+="100% -webkit-transform:rotate(100deg); \n";document.styleSheets[0].insertRule(rule);animations[steps]=name;el.css("-webkit-animation",animations[steps]+" "+duration+"s linear infinite");;elseanimate=function(el,steps,duration)var rotation=0;var g=el.find("g g").get(0);el.data("interval",setInterval(function()g.setAttributeNS(null,"transform","rotate("+(++rotation%steps*(360/steps))+")");,duration*1000/steps));;elsevar s=$("<shape>").css("behavior","url(#default#VML)").appendTo("body");if(s.get(0).adj)var sheet=document.createStyleSheet();$.each(["group","shape","stroke"],function()sheet.addRule(this,"behavior:url(#default#VML);"););render=function(target,d)var innerRadius=d.width*2+d.space;var r=(innerRadius+d.length+Math.ceil(d.width/2)+1);var s=r*2;var o=-Math.ceil(s/2);var el=$("<group>",coordsize:s+" "+s,coordorigin:o+" "+o).css(top:o,left:o,width:s,height:s);for(var i=0;i<d.segments;i++)el.append($("<shape>",path:"m "+innerRadius+",0 l "+(innerRadius+d.length)+",0").css(width:s,height:s,rotation:(360/d.segments*i)+"deg").append($("<stroke>",color:d.color,weight:d.width+"px",endcap:"round",opacity:$.fn.activity.getOpacity(d,i))));return $("<group>",coordsize:s+" "+s).css(width:s,height:s,overflow:"hidden").append(el);;animate=function(el,steps,duration)var rotation=0;var g=el.get(0);el.data("interval",setInterval(function()g.style.rotation=++rotation%steps*(360/steps);,duration*1000/steps));;$(s).remove();)(jQuery);
(function($)
$.fn.parallaxSlider = function(options)
var opts = $.extend(, $.fn.parallaxSlider.defaults, options);
return this.each(function()
var $pxs_container = $(this),
o = $.meta ? $.extend(, opts, $pxs_container.data()) : opts;
$("#menuContainer").activity(segments: 12, width:5.5, space: 6, length: 13, color: '#fff');
//the main slider
var $pxs_slider = $('.pxs_slider',$pxs_container),
//the elements in the slider
$elems = $pxs_slider.children(),
//total number of elements
total_elems = $elems.length,
//the navigation buttons
$pxs_next = $('.pxs_next',$pxs_container),
$pxs_prev = $('.pxs_prev',$pxs_container),
//the bg images
$pxs_bg1 = $('.pxs_bg1',$pxs_container),
//current image
current = 0,
//the thumbs container
$pxs_thumbnails = $('.pxs_thumbnails',$pxs_container),
//the interval for the autoplay mode
slideshow,
//the loading image
//$pxs_loading = $('.pxs_loading',$pxs_container),
$pxs_slider_wrapper = $('.pxs_slider_wrapper',$pxs_container);
//first preload all the images
var loaded = 0,
$images = $pxs_slider_wrapper.find('img');
$images.each(function()
//ADD INDICATORS
$('.pxs_thumbnails').append("<li></li>");
);
//the thumbs
var $thumbs = $pxs_thumbnails.children();
$images.each(function()
var $img = $(this);
$('<img/>').load(function()
++loaded;
if(loaded == total_elems/**2*/)
$("#menuContainer").activity(false);
//$pxs_loading.hide();
$('.pxs_bg .pxs_bg1').fadeIn(400);
$pxs_slider_wrapper.fadeIn(1200);
//one images width (assuming all images have the same sizes)
var one_image_w = $pxs_slider.find('img:first').width();
setWidths($pxs_slider,
$elems,
total_elems,
$pxs_bg1,
one_image_w,
$pxs_next,
$pxs_prev);
//make the first thumb be selected
highlight($thumbs.eq(0));
//slide when clicking the navigation buttons
$pxs_next.bind('click',function()
++current;
if(current >= total_elems)
if(o.circular)
current = 0;
else
--current;
return false;
highlight($thumbs.eq(current));
slide(current,
$pxs_slider,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
$thumbs.fadeOut(100).delay(1000).fadeIn(400);
);
$pxs_prev.bind('click',function()
--current;
if(current < 0)
if(o.circular)
current = total_elems - 1;
else
++current;
return false;
highlight($thumbs.eq(current));
slide(current,
$pxs_slider,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
$thumbs.fadeOut(100).delay(1000).fadeIn(400);
);
/*
clicking a thumb will slide to the respective image
*/
$thumbs.bind('click',function()
var $thumb = $(this);
highlight($thumb);
//if autoplay interrupt when user clicks
if(o.auto)
clearInterval(slideshow);
current = $thumb.index();
slide(current,
$pxs_slider,
$pxs_bg1,
o.speed,
o.easing,
o.easingBg);
$thumbs.fadeOut(100).delay(1000).fadeIn(400);
);
/*
activate the autoplay mode if
that option was specified
*/
if(o.auto != 0)
o.circular = true;
slideshow = setInterval(function()
$pxs_next.trigger('click');
,o.auto);
//RESIZE
$(window).resize(function()
w_w = $(window).width();
setWidths($pxs_slider,$elems,total_elems,$pxs_bg1,one_image_w,$pxs_next,$pxs_prev);
slide(current,
$pxs_slider,
$pxs_bg1,
1,
o.easing,
o.easingBg);
);
).error(function()
alert('here')
).attr('src',$img.attr('src'));
);
);
;
//the current windows width
var w_w = $(window).width();
var slide = function(current,
$pxs_slider,
$pxs_bg1,
speed,
easing,
easingBg)
var slide_to = parseInt(-w_w * current);
$pxs_slider.stop().animate(
left : slide_to + 'px'
,speed, easing);
$pxs_bg1.stop().animate(
left : slide_to/8 + 'px'
,speed, easingBg);
var highlight = function($elem)
$elem.siblings().removeClass('selected');
$elem.addClass('selected');
var setWidths = function($pxs_slider,
$elems,
total_elems,
$pxs_bg1,
one_image_w,
$pxs_next,
$pxs_prev)
/*
the width of the slider is the windows width
times the total number of elements in the slider
*/
var pxs_slider_w = w_w * total_elems;
$pxs_slider.width(pxs_slider_w + 'px');
//each element will have a width = windows width
$elems.width(w_w + 'px');
/*
we also set the width of each bg image div.
The value is the same calculated for the pxs_slider
*/
$pxs_bg1.width(pxs_slider_w + 'px');
$.fn.parallaxSlider.defaults =
auto : 0, //how many seconds to periodically slide the content. If set to 0 then autoplay is turned off.
speed : 1200, //speed of each slide animation
easing : 'jswing', //easing effect for the slide animation
easingBg : 'jswing', //easing effect for the background animation
circular : true //circular slider
;
//easeInOutExpo,easeInBack
)(jQuery);
【问题讨论】：
你能添加一个简单的运行示例吗？ JS-console 有错误吗？ FF 50.1.0 说：TypeError: Not enough arguments to CSSStyleSheet.insertRule
谢谢。任何想法如何解决这一问题？我不太懂JS。
【参考方案1】：
看起来 API 正在调用一个带有一个参数的函数。
这已被 Mozilla 弃用：https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule
并导致错误：TypeError: Not enough arguments to CSSStyleSheet.insertRule
您可以尝试将索引添加到 insertRule（在这种情况下为 0）
document.styleSheets[0].insertRule(rule, 0)
【讨论】：
以上是关于JQuery 视差滑块在 Firefox 中损坏的主要内容，如果未能解决你的问题，请参考以下文章