时间戳

首页 > 解决方案 > 设置响应字体大小在革命滑块jQuery插件中不起作用

javascript - 设置响应字体大小在革命滑块jQuery插件中不起作用

问题描述

我正在尝试为jQuery 版本font-size中的文本设置响应，但我看到它本身提供了另一种内联样式，而不是我在图层属性中指定的字体大小。我认为它在我指定的两个视口大小之间的字体大小之间提供了另一种大小。revolution sliderrevolution sliderfont-sizedata-fontsize

这是我尝试过的：

<section class="slider-container" id="">
  <div class="container-fluid">
    <div class="row">
      <div class="col-12">
        <div id="slider" class="rev_slider fullwidthbanner" style="display:none;" data-version="5.4.8.2">
          <ul>
            <li data-transition="cube-horizontal"  data-hideslideonmbile="false" style="">
              <img src="pictures/psy13.jpg" alt="psycholoist picture">
              <div class="tp-caption rev_group rs-parallaxlevel-1"
              data-width="100%"
              data-height="full"
              data-x="['left','left','center','center']"
              data-hoffset="['32','40','0','0']"
              data-y="['center','center','center','center']"
              data-type="group"
              data-responsive_offset="on"
              data-frames='[{
                "delay":100,
                "speed":300,
                "frame":"0",
                "to":"o:1;",
                "ease":"Power3.easeInOut"
              },{
                "delay":"wait",
                "speed":300,
                "frame":"999",
                "to":"opacity:0;",
                "ease":"Power3.easeInOut"
              }]'
              style="position:relative; z-index:6; "
              >
              <div class="tp-caption tp-resizeme"
                data-type="text"
                data-x="['left','left','center','center']" data-hoffset="['0','0','0','0']"
                data-y="['center','center','center','center']" data-voffset="['0','0','0','-60']"
                data-fontsize='[20,18,17,16]'
                data-lineheight="[66,52,52,40]"
                data-frames='[{
                  "delay":"+90",
                  "speed":1500,
                  "frame":"0",
                  "from":"x:[-100%];z:0;rX:0deg;rY:0;rZ:0;sX:1;sY:1;skX:0;skY:0;",
                  "to":"o:1;",
                  "mask":"x:0px;y:0px;s:inherit;e:inherit;",
                  "ease":"Power3.easeInOut"
                },{
                  "delay":"wait",
                  "speed":300,
                  "frame":"999",
                  "to":"opacity:0;",
                  "ease":"Power3.easeInOut"
                }]'
                data-responsive_offset="on"
                style=" z-index: 9;position: relative; white-space: nowrap; color:white; font-weight:100;"
              >
                 We Solve the problems that is beyond your control
               </div>
              </div>
              <div class="tp-caption tp-resizeme tp-shape tp-shapewrapper"
                data-x="[center,center,center,center]" data-hoffset="[0,0,0,0]"
                data-y="[center,center,center,center]" data-voffset="[0,0,0,0]"
                data-type="shape"
                data-height="full"
                data-width:"full"
                data-whitespace="nowrap"
                data-frames='[{
                  "delay":100,
                  "speed":1500,
                  "frame":0,
                  "from":"opacity:0;",
                  "to":"o:1;",
                  "ease":"Power3.easeInOut"
              },
              {
                  "delay":"wait",
                  "speed":300,
                  "frame":"999",
                  "to":"opacity:0",
                  "ease":"Power3.easeInOut"
              }]'
                style="background:rgba(0,0,0,0.35); width:200vw; position:relative; z-index:1;"
              >
              </div>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</section>

$('#slider').show().revolution({
  delay:9000,
  autoHeight:"off",
  sliderLayout: 'fullwidth',
  sliderType:'standard',
  speed:'400',
  responsiveLevels:[1200,992,768,576],
  visibilityLevels:[1200,992,768,576],
  gridwidth:[1240,1024,778,480],
  gridheight:[1000,600,650,600],
  parallax: {
    type:"mouse",
    origo:"slidercenter",
    speed:400,
    speedbg:0,
    speedls:0,
    levels:[1,10,15,20,25,30,35,40,45,46,47,48,49,50,51,55],
    disable_onmobile:"on"
  }
});

请问，如何禁用这个？

标签： javascriptjqueryjquery-pluginsrevolution-slider

解决方案

您可以尝试在字符串数组中传递值而不是数字，因此请尝试

data-fontsize="['20','18','17','16']"

正如我所看到的，您使用responsiveLevels的是 Revolution Slider，因此您可以设置不同的字体大小，直到 4 种屏幕分辨率

responsiveLevels:[1200,992,768,576]

所以

  • 对于低于 576px 的分辨率，字体大小为 16px
  • 对于低于 768px 的分辨率，字体大小为 17px
  • 对于低于 992 像素的分辨率，字体大小为 18 像素
  • 对于低于 1200 像素的分辨率，字体大小为 20 像素

推荐阅读