开发者

working out a ratio based on a previously calculated value

I'm trying to produce a photo slider that is dynamically sized according to the viewport size, but maintains a 4:3 ratio regardless of viewport dimensions.

The page I'm working on is here: http://steph-morris.com/thenovel_III.html

Width is currently being calculated by grabbing the viewport width and subtracting the size of the menu bars, like so:

$(document).ready(funct开发者_C百科ion(){
  var height = $(window).height(), width = $(window).width();
  $('img').css('width', (width - (281+(height*0.32))) + 'px');
  });

(Where one menu is a known width of 281px and the other menu is calculated as height*0.32).

I need to calculate height in relation to width in a 4:3 ratio.

I am brand new to jQuery maths and haven't been able to get a working nested equation that does something like

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

Also, this is not an efficient approach- I should be storing the outcome of the 'width' calculation I think and calculating it more as

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

But I also don't know how to do that with jQuery.

So I would really appreciate any assistance with (a) how to write a good nested equation to work out the value of 'height', or (b) how to save the outcome of the 'width' equation so that it can be used again, and obviously (c) the correct way to calculate a 4:3 ratio.


you can write an equation with a function :

$(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();
});

Then please have a look at javascript basis before trying going elsewhere...and maybe some primary Math lessons about cross product ;) Then jQuery is 'just' a javascript wrapper that helps a lot through different browser compatibilities interpreting things quite differently...work hard

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜