Question

我正在尝试生成一个根据视口大小动态调整大小的照片滑块，但无论视口尺寸如何，都保持4：3的比例。

我正在处理的页面在这里： http://steph-morris.com/thenovel_III.html

当前正在通过抓取视口宽度并减去菜单栏的大小来计算宽度，如下所示：

$(document).ready(function(){
  var height = $(window).height(), width = $(window).width();
  $('img').css('width', (width - (281+(height*0.32))) + 'px');
  });

（其中一个菜单的已知宽度为281px，另一个菜单的高度为* 0.32）。

我需要以4：3的比例计算相对于宽度的高度。

我是jQuery数学的新手，并且无法获得类似

的工作嵌套方程式

$('img').css('height', ((width - (281+(height*0.32))*thecorrectratio) + 'px');

此外，这不是一种有效的方法 - 我应该存储我认为的“宽度”计算的结果并将其计算得更多

$('img').css('height', (widthvalue*thecorrectratio) + 'px');

但我也不知道如何用jQuery做到这一点。

所以我非常感谢任何帮助（a）如何编写一个好的嵌套方程来计算'height'的值，或者（b）如何保存'width'方程的结果以便它可以再次使用，显然（c）计算4：3比例的正确方法。

Answer 1

你可以用函数写一个等式：

$(document).ready(function(){
    function height43(width){
        return Math.floor(parseInt(width)/4*3);
    }
    var menuWidth = 281;
    var slideWidth = $(window).width()-menuWidth;
    var slideHeight = height43(slideWidth);
    // all variables and functions declared directly inside some brackets
    // are available everywhere inside or subinside these brackets so you can reuse them
    function anotherFunctionSample(){
        alert('slideHeight : '+slideHeight);
        alert('new calculation with another width : '+height43(700));
    }
    anotherFunctionSample();
});

那么请在尝试去其他地方之前先看一下javascript的基础......也许还有一些关于跨产品的小学数学课程;）然后jQuery是'只是'一个javascript包装器，通过不同的浏览器兼容性帮助很多解释事情完全不同...努力工作

根据先前计算的值计算出比率

1 个答案: