Question

我一直在玩“marginLeft：”100％“”，但这只会让div完全脱离屏幕。我希望div，onClick，浮动：正对着屏幕右侧的边缘。

的jsfiddle： https://jsfiddle.net/487r8qza/

HTML

$this->hasMany('App\Article')

的JavaScript

<div id="footer">
    <one id="one">

    </one>
    <two id="two">

    </two>
    <three id="three">

    </three>
</div>

CSS

$("#footer").click(function(){
    $("#one").animate({ 
        marginLeft: "+=900px",
    }, 2000 );
    $("#two").animate({ 
        marginLeft: "+=900px",
    }, 800 );
    $("#three").animate({ 
        marginLeft: "+=900px",
    }, 333 );
});
$("#three").click(function() {
    $("#three").animate({
        marginLeft:  "100%"} , 1000
    );
});

Answer 1

对不起，如果花了这么长时间，就会出现问题。是的，所以我让它运作起来。希望这有帮助

JSFIDDLE

至于CSS，我尽量保持简单。这里的诀窍是让你的DIV显示内联块，这样一开始它们就会整齐地堆叠在一起。你也希望让它们全部浮动。

CSS：

.box-container{
    width: 100%;
    height: 115px;
    position: relative;
    overflow: hidden;   
}

.box-item{
    width: 300px;
    height: 115px;
    position: relative;
    display: inline-block;
    float: right;
    cursor: pointer;
}

.b0{
    background: #7888D9;
}

.b1{
    background: #76D54E;
}

.b2{
    background: #DF7B41;
}

接下来，在HTML中，您需要为每个DIV提供相同的类名，这将简化Jquery点击事件。最后，我们还将为我们的第一个DIV提供“当前”的类名。这将控制哪个DIV必须移动以及哪个DIV必须等待并保持闲置，只要他旁边的人没有移动。你很快就会明白的。

HTML：

<div class="box-container">
    <div class="box-item b0 current">
        Box 1
    </div>
    <div class="box-item b1">
        Box 2
    </div>
    <div class="box-item b2">
        Box 3
    </div>                  
</div>

最后，至于Jquery，这是一个有点复杂的地方，我会尝试解释我能做的最好的事情。请记住，数学不是我的强项。由于我们的DIVS都在CSS中浮动，所以它们都将被堆叠到右边（当然）。为了对抗并将它们放在左边，我们需要给每个DIV一个正确的位置。这个位置会有某种偏移。要得到这个数字，我们需要将DIV的宽度乘以DIV的总数。之后，我们必须将这个数字减去我们DIV容器的总宽度（基本上是浏览器宽度）。

对于点击事件，我们必须首先检查我们点击的DIV是否具有我们的“当前”类名。如果是，我们移动它，如果没有，我们不移动它。简单的部分就是移动它们。通过将DIV的右侧值重置为0，每个都将通过我们的animate事件相应地向右滑动。完成后，我们将“当前”类名切换到下一个DIV。然后我们增加一个计数器。这将有助于查看是否已移动所有DIV。

一旦所有DIV都被移到右边，就会有一个IF语句，它会检查我们的计数器，看它是否大于我们的DIV总数。如果是，则滑动运动被反转，所有DIV将返回到左侧。以相同的方式，如果被点击的元素不是当前的DIV，它将不会移动。如果是，它将向左移动。当所有DIV都已移回默认位置时，我们将重置计数器，并将我们的“当前”类名重新分配给第一个DIV。

调整大小功能并非最佳，但它可以处理您可能遇到的任何响应问题。它会将所有DIV重置到左侧并重新计算偏移量，这样每个DIV都不会在屏幕外滑动。需要一点工作，但现在总比没有好。

JQUERY：

var $boxWidth;
var $screenWidth;
var $offsetRight;
var $count = 0;

$(function () {

    $boxWidth = $('.box-item').width();
    $screenWidth = $('.box-container').width();
    $offsetRight = $screenWidth - ($boxWidth*$('.box-item').length);
    $('.box-item').css('right',$offsetRight);


    $('.box-item').click(function(event) {

        if($(this).hasClass('current')){            
            if($count < $('.box-item').length){            
                $(this).animate({ 
                    right: "0px",
                }, 2000, function(){                    
                    $count++;                
                    $(this).removeClass('current');                    

                    if($count < $('.box-item').length){
                        $(this).next().addClass('current');
                    }
                    else{
                        $(this).addClass('current');
                    }                                                      
                });                                                        
            }
            else{
                $(this).animate({ 
                    right: $offsetRight,
                }, 2000, function(){                    
                    $count++;
                    $(this).removeClass('current');

                    console.log($count);
                    if($count < ($('.box-item').length*2)){
                        $(this).prev().addClass('current');
                    }
                    else{
                        $(this).addClass('current');
                        $count = 0;
                    }                                                  
                });                                        
            }
        }        
    });

    window.onresize = myResize;
    myResize();
});

function myResize(){
    $screenWidth = $('.box-container').width();
    $offsetRight = $screenWidth - ($boxWidth*$('.box-item').length);

    $('.box-item').each(function(){
        $(this).css('right',$offsetRight);        
    });

    $('.box-item').eq(0).addClass('current');
    $count = 0;
}

控制JQuery动画功能

1 个答案: