Question

我是一个javascript学习者，我正在尝试解决以下问题。我使用带溢流卷轴的容器创建了一个旋转木马。在里面我有旋转木马div包含我的所有项目。我的所有项目都有不透明度0.3，除了我的“焦点”内的一个项目。当用户滚动时，我有一个脚本，检查哪个项目在我的“焦点”内。

var ItemToFocus = function(){
    if(  MousewheelActive == 1  ){

        First_Item_Offset = $Active_Carousel_Item.first().offset().left;
        First_Item_Offset = -First_Item_Offset;
        Focus_Point = 0.45 * Window_Width;
        Carousel_Position = First_Item_Offset + Focus_Point;
        Width = $Item.first().width();
        Length = $Active_Carousel_Item.length;

        for( i=0; i < Length; i++ ){
            Right = (i+1) *Width;
            Left = Right-Width;
            if( Right > Carousel_Position && Left < Carousel_Position ){

                if( ! $Active_Carousel_Item.eq(i).hasClass("Carousel_Item_Focus_Instant") ){
                    $Active_Carousel_Item.eq(i).addClass("Carousel_Item_Focus_Instant");

                    clearTimeout(Introduction_Timer);
                    Introduction_Timer = setTimeout(function(){
                        $Carousel_Item_Focus_Instant = $(".Carousel_Item_Focus_Instant");
                        $Carousel_Item_Focus_Instant.find(".Introduction").show();
                    },600); 

                } else if( $Active_Carousel_Item.eq(i-1).hasClass("Carousel_Item_Focus_Instant") ){
                    $Active_Carousel_Item.eq(i-1).removeClass("Carousel_Item_Focus_Instant").addClass("Carousel_Item_Blur").find(".Introduction").hide();
                } else if( $Active_Carousel_Item.eq(i+1).hasClass("Carousel_Item_Focus_Instant") ){
                    $Active_Carousel_Item.eq(i+1).removeClass("Carousel_Item_Focus_Instant").addClass("Carousel_Item_Blur").find(".Introduction").hide();   
                }

            }

        }

    }

我基本循环遍历每个项目并检查其左右偏移。这在Safari和Opera中效果很好，但在Chrome和Firefox方面却很落后。在浏览器差异方面，我的知识有限。 Chrome和Firefox是否在滚动方法上使用了更多资源？如果是这样，有一种方法可以实现修改此脚本的脚本，以便我可以实现平滑的滚动体验吗？这是该网站的临时链接，请注意您的测试版本。

http://192.185.4.96/~andrewn8/

我非常感谢一些建议，因为我试图尽可能多地了解这一点。

在chrome和firefox中糟糕的轮播性能

0 个答案: