使用jQuery根据窗口大小更改滑块的CSS高度 [英] Use jQuery to change css height of slider based on window size

问题描述

我发现解决方案非常接近我想要的，但是因为我的编程经验有限，我无法让他们为我工作。

I've found solutions very close to what I want, but because of my limited programming experience, I can't make them work for me.

在我的网站上，我需要更改这三个参数（特别是更改数字 515 ）：

On my site, I need to change these three parameters (specifically change the number 515 in the following):

• 1）inline css： < div id =rev_slider_1_1class =rev_slider fullwidthabannerstyle =display：none; max-height：515px;>


• inline css：< div id =rev_slider_1_1_wrapperclass =rev_slider_wrapper fullwidthbanner-containerstyle =margin：0px auto; padding：0px; margin-top：0px; margin-bottom：0px; max -height：515px;>

• 1) inline css: <div id="rev_slider_1_1" class="rev_slider fullwidthabanner" style="display:none;max-height:515px;">
• 2) inline 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 。

What I need to do is change the 515 based on the width of the window: if the window width is above 1280 I would like the value for the height to be 515, and if it is below 1280 I would like the height to be 615 and if the width is less than 480 make the height 715.

此代码（摘自此处）似乎是我需要的，但我不知道如何修改代码为我的具体情况：

This code (taken from here) seems to be what I need, but I can't figure out how to modify the code for my specific situation:

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);
}

任何人都可以帮助我吗？我想我只需要屏幕的宽度这样做，但我不知道。非常感谢！

Can anyone give me some help? I think I only need the width of the screen to do this, but I am not sure. Thanks so much!

推荐答案

这是你如何写你的条件：

This is how you may write your conditions:

$(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);
});

这篇关于使用jQuery根据窗口大小更改滑块的CSS高度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！