在窗口调整大小时重新计算半径

Question

这是一个简单的事实。

这是Change variable values on window.resize 的一个人，他解决了窗口调整大小更新问题。

var windowHeight = $(window).height();

$(window).resize(function(){
    windowHeight = $(window).height(); // get new height after change

});

但是当我尝试以这种方式这样做时它不起作用：

radius = Math.round( (($(window).width()) * 0.1302) / Math.tan( Math.PI / itemLength ) );


$(window).resize(function(){
    radius = Math.round( (($(window).width()) * 0.1302) / Math.tan( Math.PI / itemLength ) );
});

计算按预期工作，但它从不刷新调整大小的计算。

你能帮我弄清楚这是为什么吗？

Answer 1

我认为你的 init() 函数中的这部分代码：

// set container 3d props
TweenMax.set(container, {perspective:600})
TweenMax.set(carousel, {z:-(radius)})

// create carousel item props

for ( var i = 0; i < itemLength; i++ )
{
    var $item = item.eq(i);
    var $block = $item.find('.carouselItemInner');

    TweenMax.set($item, {rotationY:rY * i, z:radius, transformOrigin:"50% 50% " + -radius + "px"});                     
}

也必须在$(window).resize 函数中。否则它不会更新项目和轮播，只会更新变量radius。

Answer 2

结果证明解决方案涉及的内容超出了我的预期。正是马里奥·沃纳（Mario Werner）的一句话最终使我找到了解决方案。经过几个小时的燃烧和迹象表明我本身就是愚蠢的。马里奥终于给出了我需要的线索。他说; “在函数范围之外，半径变量不可用，因此不会被此事件更改。”

这让我意识到了问题并继续这样做：

$(window).resize(function(){
$(document).ready( init )

function init()
{
    w = $(window);
    container = $( '#contentContainer' );
    carousel = $( '#carouselContainer' );
    item = $( '.carouselItem' );
    itemLength = $( '.carouselItem' ).length;
    fps = $('#fps');
    rY = 360 / itemLength;
    radius = Math.round( (($(window).width()) * 0.1302) / Math.tan( Math.PI / itemLength ) );


    // set container 3d props
    TweenMax.set(container, {perspective:600})
    TweenMax.set(carousel, {z:-(radius)})

    // create carousel item props

    for ( var i = 0; i < itemLength; i++ )
    {
        var $item = item.eq(i);
        var $block = $item.find('.carouselItemInner');

TweenMax.set($item, {rotationY:rY * i, z:radius, transformOrigin:"50% 50% " + -radius + "px"});

        animateIn( $item, $block )                      
    }

    // set mouse x and y props and looper ticker
    window.addEventListener( "mousemove", onMouseMove, false );
    ticker = setInterval( looper, 1000/60 );            
}
});

我只是将 resize 事件放在了 init 函数之外，然后将完全相同的 init 函数复制粘贴到了 resize 事件中。这行得通！

谢谢马里奥！