JQuery Maths : 이전에 계산 된 값을 기준으로 비율을 계산합니다.

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

을 (여기서 한 메뉴는 알려진 너비 281 픽셀이고 다른 메뉴는 높이 * 0.32로 계산됩니다.

폭에 대한 높이를 4 : 3 비율로 계산해야합니다.

나는 JQuery와 수학에 새로운 오전 또한

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

같은, 이것은 내가의 결과를 저장해야하는 효율적인 접근 방식 -하지 않는 작업 중첩 된 방정식을 얻을 수 없었다 내가 생각하고

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

로 더를 계산하지만 나는 또한 JQuery와 함께 그렇게하는 방법을 모르는 '폭'계산.

그래서 (a) '높이'값을 계산하는 좋은 중첩 방정식을 작성하는 방법, (b) '너비'방정식의 결과를 저장하는 방법 다시 사용할 수 있으며 분명히 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(); 
}); 

는 그런 노력 다른 곳에 가기 전에 자바 스크립트 기반에서 봐주세요 ... 어쩌면 외적에 대한 몇 가지 주요 수학 수업) 그런 다음 jQuery를이 '그냥'다른 브라우저 호환성을 통해 많은 도움을주는 javascript 래퍼 ... 열심히 일합니다.