根据窗口宽度动态更改jQuery滑块选项

Question

我想基于窗口宽度（加载以及调整大小）更改jQuery选项。

我找到的解决方案接近我的需求，但是我对jQuery或javascript的了解不足，无法根据我的需要对其进行自定义。

这是我的jQuery代码：

<script type="text/javascript">
  var tpj = jQuery;

  tpj.noConflict();

  tpj(document).ready(function () {

    if (tpj.fn.cssOriginal != undefined) tpj.fn.css = tpj.fn.cssOriginal;

    tpj('#rev_slider_1_1').show().revolution({
      delay: 5000,
      startwidth: 1920,
      startheight: 515,
      hideThumbs: 200,

      thumbWidth: 100,
      thumbHeight: 50,
      thumbAmount: 4,

      navigationType: "bullet",
      navigationArrows: "verticalcentered",
      navigationStyle: "navbar",

      touchenabled: "on",
      onHoverStop: "off",

      navOffsetHorizontal: 0,
      navOffsetVertical: 20,

      shadow: 0,
      fullWidth: "on"
    });

  }); //ready
</script>

我想基于窗口宽度更改startheight 。

如果窗口宽度大于1280，则希望高度值为515，如果窗口宽度小于1280，则希望高度值为615，如果宽度小于480，则使高度为715。

在另一篇文章的帮助下，我可以使用以下脚本更改所需的CSS：

$(window).on('load resize', function () {
  var w = $(window).width();
  $("#rev_slider_1_1 #rev_slider_1_1_wrapper")
    .css('max-height', w > 1280 ? 515 : w > 480 ? 615 : 715);
});

但是我还需要startheight更改jQuery startheight值。

Answer 1

为什么不在CSS中使用百分比。

我在这里创建了一个示例：

http://jsfiddle.net/webwarrior/aLJQm/52/

<div id="slider"></div>

CSS：

#slider {
    width: 90%; 
}

要调整大小，请在调整大小时使用JavaScript，例如：

var clientWidth = jQuery(window).width();
var clientHeight = jQuery(window).height();
jQuery("#rev_slider_1_1 #rev_slider_1_1_wrapper").height(clientHeight/20);

现在尝试在图像上进行以下操作：

.slotholder{
    overflow: hidden;
}
.slotholder img{
    width: 110%;
    margin-left: -5%;
}

如http://jsfiddle.net/webwarrior/wLFEJ/11/

hth

Answer 2

修改“ load resize”事件绑定，如下所示：

$(window).on('load resize', function () {
  var w = $(window).width();
  $("#rev_slider_1_1 #rev_slider_1_1_wrapper")
    .css('max-height', w > 1280 ? 515 : w > 480 ? 615 : 715);
  if(w > 1280) { tpj('#rev_slider_1_1').revolution('option', 'startheight', 515);}
  else if(w < 1280 && w > 480) { tpj('#rev_slider_1_1').revolution('option', 'startheight', 615); }
  else { tpj('#rev_slider_1_1').revolution('option', 'startheight', 715); }      
});

这将适用于大多数jquery插件，但是由于您似乎正在使用付费插件（http://codecanyon.net/item/slider-revolution-sensitive-jquery-plugin/2580848将是我的猜测），因此自定义设置可能是受限制-因此，一切顺利！ :)