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

Question

这是一个简单的道理。

Change variable values on window.resize 的一个人解决了 Window 调整大小更新问题。

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 的一句话最终引导我找到了解决方案。经过几个小时的燃烧和迹象表明我本身就是愚蠢的。马里奥终于给了我需要的线索。他说; "Outside the function's scope the radius variable is not available and thus will not be changed by this event."

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

$(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 事件中。这行得通！

谢谢马里奥！

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

Recalculate Radius on Window Resize

javascript

jquery

math

gsap