2

我已经搜索了一段时间，答案可能已经摆在我面前，但我无法将它们放在一起。我想要做的是调整自定义滑块的大小，如部分区域。

我使用引导程序作为框架，但 jQuery 在这里效果最好，因为容器内的内容使用绝对定位，并且在管理面板中使用 jQuerys 非常自己的.draggable功能生成随机的顶部/左侧值。

我想尽可能地保持基本，我认为只需要一些数学。示例FIDDLE

var h = $(window).height();
var w = $(window).width();
var static_h = $('.static-area').height();

    if((h/w) > 800) {
        $('#main').css({'margin-top': w/1.2});
    }
    else { 
        $('#main').css({'margin-top': w/1.2, 'width':w});
        $('.static-area div').css({'width': w/2, 'left':0});  
    }

这种排序工作，我可以划分所有css属性，如顶部/左侧宽度/高度，但我不知道如何在这里进行数学运算，以便内容随着浏览器调整大小而调整。

我为视觉演示FIDDLE做了一个快速的小提琴

我不是想在这里重新创建轮子，这个问题是直截了当的，我不想以任何一种特定的方式来做，而是一种相当常见的方式，因为我相信这在现代实践中很常见。对我来说很难找到答案的唯一原因是容器内的内容是绝对定位和随机的。

总结： 我想.resize()对所有孩子的宽度、高度、左侧和顶部值使用并做一些数学运算。我不知道如何做这个数学，我怀疑它比这更复杂，但这就是我正在寻找的原则。

附加说明：我是layerslider插件的忠实粉丝，他们做得非常出色。我正在尝试研究这个，因为我真的很喜欢将图层拖动到您想要的位置的能力，这很酷，基本上只需要.draggable()一个数据库。我也尝试研究它的响应部分，但是包含这个函数的 jQuery 是 3,000 行代码（我不敢相信有人真的写了那么多代码，我睡着了滚动把它扔了哈哈）但是他们在某个地方完美地写了这个，如果你看看他们的演示页面，你会明白我在说什么。

更新：

var w = $(window).width();

    if((w) > 800) {
        //Figuring out what to do lol, but nothing for now
    }
    else { 
        // Doing this when window is under 800px
        $('.sublayer_1 div, .sublayer_1 img').css({'left': w/2, 'width': w}); 
    }

这有点像我想要的那样，我当然需要添加它，但也许有人可以帮助我写一些更高级的东西？

上面的代码所做的是改变我的元素的左侧和宽度，因为浏览器通过将窗口宽度降低 2 来重新调整大小，我隐约明白为什么会这样，但我不能完全理解它，哈哈讨厌数学。

4

1 回答 1

1

我不确定你的问题。您必须计算要调整大小的元素的比率并将其应用于其子元素。

ratio = newWidth / currentWidth;

当您使用 Twitter Bootstrap 时，我很快在 Fiddle 上做了一个示例：http: //jsfiddle.net/memel/f7eck/4/

让我知道这是否对您有用。干杯，E。

于 2013-08-20T14:20:41.157 回答