Question

这是一个简单的事实。

这是Change variable values on window.resize的一位解决了Windows调整大小更新问题的人。

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最终引领我解决的问题。经过几个小时的燃烧和迹象表明我本身就是愚蠢的。马里奥最终给出了我需要的线索。他说; ＆＃34;在函数范围之外，radius变量不可用，因此不会被此事件更改。＆＃34;

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

$(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函数之外，并在resize事件中复制粘贴完全相同的init函数。这有效！

谢谢马里奥！

重新调整窗口大小的半径

2 个答案: