jquery - 使用窗口大小更改 jQuery 幻灯片大小

Question

当浏览器尺寸大于 1280 像素时，我需要将此滑块更改为 1180x454。不确定如何在 CSS 之外进行 @media 类型更改。谢谢。

<script type="text/javascript">

        $(document).ready(function() {
        $.noConflict();
    jQuery('#banner-example-1').paradigm(
                    {                                       
                        width:940,
                        height:362      

                });                     
        });

        </script>

Answer 1

这可能不是最好的解决方案，但鉴于滑块的一些限制，您似乎别无选择，只能在窗口调整大小时滚动自己的缩放功能。

$(window).resize(function() {
  // put your code here to trigger resizing of your slider
});

这是一个基本的 jsfiddle 作为示例。您可以执行类似的操作，检查窗口大小是否为某个宽度，如果是，请包含 javascript 来调整设置了内联宽度和高度的范例 div 的大小。

编辑：更新 jsfiddle 以包含更改元素宽度的逻辑。不幸的是，由于文档不公开，我无法告诉您具体需要做什么来触发范式的大小更改，因此如果不是像这样简单的事情，您可能需要联系开发人员寻求帮助：

$(window).resize(function() {
  // If > 1280 then width: 1180, height: 454 else width: 940, height: 362
  var width, height;
  if (this.outerWidth > 1280) {
    width = "1180px";
    height = "454px";
  }
  else {
    width = "940px";
    height = "362px";
  }
  $("#banner-example-1").css("width", width);
  $("#banner-example-1").css("height", height);
});