如何根据宽度屏幕更改Slider Revolution上的偏移jquery选项

时间:2016-10-17 14:30:29

标签: jquery offset revolution-slider

我面临的问题是,我需要设置一个垂直偏移(这可以在插件的面板中设置),但我只想在某些屏幕尺寸上,因为我的标题在大屏幕上是垂直的水平当尺寸较小时,只需要小尺寸即可实现偏移。

在大于1100px的宽度上我需要和0px的offet,但在较小的我需要125px的偏移;

以下是使用欲望选项启动插件的脚本,为了更改偏移量,我需要的是 fullScreenOffset

<script type="text/javascript">
                /******************************************
        -   PREPARE PLACEHOLDER FOR SLIDER  -
    ******************************************/

    var setREVStartSize=function(){
        try{var e=new Object,i=jQuery(window).width(),t=9999,r=0,n=0,l=0,f=0,s=0,h=0;
            e.c = jQuery('#rev_slider_2_1');
            e.responsiveLevels = [1240,1024,778,480];
            e.gridwidth = [1400,1240,778,480];
            e.gridheight = [868,768,960,720];

            e.sliderLayout = "fullscreen";
            e.fullScreenAutoWidth='on';
            e.fullScreenAlignForce='off';
            e.fullScreenOffsetContainer= '';
            e.fullScreenOffset='';
            if(e.responsiveLevels&&(jQuery.each(e.responsiveLevels,function(e,f){f>i&&(t=r=f,l=e),i>f&&f>r&&(r=f,n=e)}),t>r&&(l=n)),f=e.gridheight[l]||e.gridheight[0]||e.gridheight,s=e.gridwidth[l]||e.gridwidth[0]||e.gridwidth,h=i/s,h=h>1?1:h,f=Math.round(h*f),"fullscreen"==e.sliderLayout){var u=(e.c.width(),jQuery(window).height());if(void 0!=e.fullScreenOffsetContainer){var c=e.fullScreenOffsetContainer.split(",");if (c) jQuery.each(c,function(e,i){u=jQuery(i).length>0?u-jQuery(i).outerHeight(!0):u}),e.fullScreenOffset.split("%").length>1&&void 0!=e.fullScreenOffset&&e.fullScreenOffset.length>0?u-=jQuery(window).height()*parseInt(e.fullScreenOffset,0)/100:void 0!=e.fullScreenOffset&&e.fullScreenOffset.length>0&&(u-=parseInt(e.fullScreenOffset,0))}f=u}else void 0!=e.minHeight&&f<e.minHeight&&(f=e.minHeight);e.c.closest(".rev_slider_wrapper").css({height:f})

        }catch(d){console.log("Failure at Presize of Slider:"+d)}
    };

    setREVStartSize();

                var tpj=jQuery;

    var revapi2;
    tpj(document).ready(function() {
        if(tpj("#rev_slider_2_1").revolution == undefined){
            revslider_showDoubleJqueryError("#rev_slider_2_1");
        }else{
            revapi2 = tpj("#rev_slider_2_1").show().revolution({
                sliderType:"standard",
                sliderLayout:"fullscreen",
                dottedOverlay:"none",
                delay:9000,
                navigation: {
                    keyboardNavigation:"on",
                    keyboard_direction: "vertical",
                    mouseScrollNavigation:"on",
                        mouseScrollReverse:"default",
                    onHoverStop:"off",
                    touch:{
                        touchenabled:"on",
                        swipe_threshold: 75,
                        swipe_min_touches: 1,
                        swipe_direction: "vertical",
                        drag_block_vertical: false
                    }
                    ,
                    bullets: {
                        enable:true,
                        hide_onmobile:true,
                        hide_under:1024,
                        style:"zeus",
                        hide_onleave:false,
                        direction:"vertical",
                        h_align:"right",
                        v_align:"center",
                        h_offset:30,
                        v_offset:0,
                        space:5,
                        tmp:'<span class="tp-bullet-image"></span><span class="tp-bullet-imageoverlay"></span><span class="tp-bullet-title">{{title}}</span>'
                    }
                },
                responsiveLevels:[1240,1024,778,480],
                visibilityLevels:[1240,1024,778,480],
                gridwidth:[1400,1240,778,480],
                gridheight:[868,768,960,720],
                lazyType:"none",
                shadow:0,
                spinner:"spinner2",
                stopLoop:"on",
                stopAfterLoops:0,
                stopAtSlide:1,
                shuffle:"off",
                autoHeight:"off",
                fullScreenAutoWidth:"on",
                fullScreenAlignForce:"off",
                fullScreenOffsetContainer: "",
                fullScreenOffset: "",
                disableProgressBar:"on",
                hideThumbsOnMobile:"off",
                hideSliderAtLimit:0,
                hideCaptionAtLimit:0,
                hideAllCaptionAtLilmit:0,
                debugMode:false,
                fallbacks: {
                    simplifyAll:"off",
                    nextSlideOnWindowFocus:"off",
                    disableFocusListener:false,
                }
            });
        }
    }); /*ready*/
</script>

我有搜索,但没找到合适的答案。我知道使用resize()函数,但我不知道如何更改脚本中的值。

提前致谢。

1 个答案:

答案 0 :(得分:1)

现在您已经获得了“i”变量中的宽度,您可以在变量offset中创建这样的短if语句:

e.fullScreenOffset = i > 1100 ? '0' : '125';

我不知道你是否需要最后的“px”或者只需要数字,我也不知道是否应该在e.fullScreenOffsetContainer上,无论如何,希望这有帮助。 / p>

利奥。