Firefox中破解了JQuery视差滑块

时间:2017-01-03 15:50:18

标签: jquery wordpress firefox slider

我的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"});}else{margin.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");};}else{animate=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));};}}else{var 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);

1 个答案:

答案 0 :(得分:1)

看起来API正在调用一个带有一个参数的函数。

Mozilla弃用了这个:https://developer.mozilla.org/en-US/docs/Web/API/CSSStyleSheet/insertRule

并导致错误:auto where = mymap.find(key); if (where == mymap.end()) where = mymap.emplace(key, expensive_function(key)).first;

您可以尝试将索引添加到insertRule(在本例中为0)

TypeError: Not enough arguments to CSSStyleSheet.insertRule