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

Question

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

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

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

$(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)如何编写一个好的嵌套方程来计算“高度”的值，或(b)如何保存“宽度”方程的结果以便它可以再次使用，显然 (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 基础……也许还有一些关于叉积的初级数学类(class)；) 然后 jQuery“只是”一个 javascript 包装器，它通过不同的浏览器兼容性以完全不同的方式解释事物来提供很多帮助......努力工作