2011-09-18 93 views
0

我试图根据视口大小生成动态调整大小的照片滑块,但保持4:3的比率,而不考虑视口尺寸。JQuery Maths:根据以前计算的值计算比率

我正在浏览的网页是在这里: 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'); 
    }); 

(其中一个菜单的宽度为281像素,另一个菜单的高度为0.32)。

我需要计算高度与宽度的比例为4:3。

我全新的jQuery的数学和一直没能得到一个工作嵌套式,做类似

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

而且,这不是一个有效的approach-我应该存储的结果在“宽度”计算,我认为并计算其多为

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

但我也不知道怎么做,使用jQuery。 (a)如何编写一个好的嵌套方程来计算'高度'的值,或者(b)如何保存'宽度'方程的结果,以便它可以再次使用,显然(c)计算4:3比率的正确方法。

+0

这实际上是一个JavaScript问题,甚至只是一个数学问题。 JQuery没有数学。 –

+0

我曾经回答过一个似乎非常相似的问题:http://stackoverflow.com/questions/6565703/math-algorithm-fit-image-to-screen-retain-aspect-ratio/ – davin

回答

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包装,它可以通过不同的浏览器兼容性解释不同的事情来帮助我们完成不同的工作......努力工作

+0

感谢有关如何构造函数和方程,这是行之有效的! – Ila