使用jQuery可以根据窗口大小更改滑块的css高度

Use jQuery to change css height of slider based on window size

本文关键字：高度 css 窗口大小 jQuery 使用      更新时间：2023-09-26

我已经找到了非常接近我想要的解决方案，但由于我的编程经验有限，我无法使它们为我工作。

我想做的是根据窗口大小更改两个内联css标记中的一个参数。

在我的网站上，我需要更改这三个参数（具体更改下面的数字515）：

  • 1） 内联css：<div id="rev_slider_1_1" class="rev_slider fullwidthabanner" style="display:none;max-height:515px;">
  • 2） 内联css：<div id="rev_slider_1_1_wrapper" class="rev_slider_wrapper fullwidthbanner-container" style="margin:0px auto;padding:0px;margin-top:0px;margin-bottom:0px;max-height:515px;">

我需要做的是根据窗口的宽度更改515：如果窗口宽度高于1280，我希望高度值为515，如果低于1280，我希望身高为615，如果宽度小于480，则将高度设为715。

这个代码（取自这里）似乎是我需要的，但我不知道如何根据我的具体情况修改代码：

jQuery.event.add(window, "load", resizeFrame);
jQuery.event.add(window, "resize", resizeFrame);
function resizeFrame() 
{
    var h = $(window).height();
    var w = $(window).width();
    $("#elementToResize").css('height',(h < 1024 || w < 768) ? 500 : 400);
}

有人能帮我吗？我想我只需要屏幕的宽度就可以做到这一点，但我不确定。非常感谢！

这就是编写条件的方法：

$(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);
});
相关文章：