Jquery滚动动画

2023年9月7日 223次阅读

我已经分配了一些工作,我必须在一些包含不同内容的块(div)上实现一种老虎机类型滚动.我想要做的是：每当我点击一个按钮/链接时,我想要一个包含4个块(div)的列向上移动一个等于每个块高度的距离.我已经能够提出以下基本功能(感谢SO的优秀答案！)：

HTML

    <div class="slot" id="slot1">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block last">4</div>
</div>
<div class="slot" id="slot2">
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
    <div class="block last">8</div>
</div>
<div class="slot" id="slot3">
    <div class="block">9</div>
    <div class="block">10</div>
    <div class="block">11</div>
    <div class="block">12</div>
</div>
<div class="clear"></div>
<p><a href="#" id="nudge1">nudge1</a></p>
<p><a href="#" id="nudge2">nudge2</a></p>
<p><a href="#" id="nudge3">nudge3</a></p>

CSS

.block {
    height:58px;
    width:100px;
    color: #ccc;
    border: 1px solid #666;
    position:absolute;
}
.slot {
    height: 176px;
    width:100px;
    border: solid 1px black;
    position: relative;
    overflow: hidden;
    float:left;
}
.clear {
    clear:both;
}

p {
    display:inline;}
}

JS

$(document).ready(function() {

    $(".block").last().addClass("last");
    $(".slot").each(function() {
        var i = 0;
        $(this).find(".block").each(function() {
            var $this = $(this);
            $this.css("top", i);
            i += $this.height();
        });
    });

    $('#nudge1').on('click',function() {
       var countScrolls = $('.slot .block').length;
        for (var i=0; i < countScrolls; i++) {
        var top = parseInt($('#slot1 .block:nth-child(' + i + ')').css("top"));
    if (top < -58) { 
        var $lastEle = $('#slot1 .block:nth-child(' + i + ')').closest('.slot').find(".last");
        $lastEle.removeClass("last");
        $('#slot1 .block:nth-child(' + i + ')').addClass("last");
        var top = (parseInt($lastEle.css("top")) + $lastEle.height());
        $('#slot1 .block:nth-child(' + i + ')').css("top", top);
    }
    $('#slot1 .block:nth-child(' + i + ')').clearQueue().stop().animate({
        top: (parseInt(top) - 58)
    }, 100, 'linear');
        }
        });

        $('#nudge2').on('click',function() {
       var countScrolls = $('.slot .block').length;
        for (var i=0; i < countScrolls; i++) {
        var top = parseInt($('#slot2 .block:nth-child(' + i + ')').css("top"));
    if (top < -58) { 
        var $lastEle = $('#slot2 .block:nth-child(' + i + ')').closest('.slot').find(".last");
        $lastEle.removeClass("last");
        $('#slot2 .block:nth-child(' + i + ')').addClass("last");
        var top = (parseInt($lastEle.css("top")) + $lastEle.height());
        $('#slot2 .block:nth-child(' + i + ')').css("top", top);
    }
    $('#slot2 .block:nth-child(' + i + ')').clearQueue().stop().animate({
        top: (parseInt(top) - 58)
    }, 100, 'linear');
        }
        });

    $('#nudge3').on('click',function() {
       var countScrolls = $('.slot .block').length;
        for (var i=0; i < countScrolls; i++) {
        var top = parseInt($('#slot3 .block:nth-child(' + i + ')').css("top"));
    if (top < -58) { 
        var $lastEle = $('#slot2 .block:nth-child(' + i + ')').closest('.slot').find(".last");
        $lastEle.removeClass("last");
        $('#slot3 .block:nth-child(' + i + ')').addClass("last");
        var top = (parseInt($lastEle.css("top")) + $lastEle.height());
        $('#slot3 .block:nth-child(' + i + ')').css("top", top);
    }
    $('#slot3 .block:nth-child(' + i + ')').clearQueue().stop().animate({
        top: (parseInt(top) - 58)
    }, 100, 'linear');
        }
        });

});

Here是一个小提琴,以便更好地参考.单击“nudge”可激活块以向上移动高度等于每个块的高度.我的问题是,这对于现在一次两个街区来说效果非常好,我无法弄清楚如何显示更多(3具体).有谁能建议我这样做的方法？

最佳答案 这怎么样？
Demo.使其更简单,可读和可扩展.抱歉,我无法访问当前位置的jsfiddle.

HTML：

<div class="slot" id="slot1">
    <div class="block">1</div>
    <div class="block">2</div>
    <div class="block">3</div>
    <div class="block">4</div>
</div>
<div class="slot" id="slot2">
    <div class="block">5</div>
    <div class="block">6</div>
    <div class="block">7</div>
    <div class="block">8</div>
</div>
<div class="slot" id="slot3">
    <div class="block">9</div>
    <div class="block">10</div>
    <div class="block">11</div>
    <div class="block">12</div>
</div>

<div class="clear"></div>

<div class="slotActionWrapper">
    <div class="slotActions">
        <a href="#" id="nudge1Up">&uarr;</a>&nbsp;
        <a href="#" id="nudge1Down">&darr;</a>
    </div>
    <div class="slotActions">
        <a href="#" id="nudge2Up">&uarr;</a>&nbsp;
        <a href="#" id="nudge2Down">&darr;</a>
    </div>
    <div class="slotActions">
        <a href="#" id="nudge3Up">&uarr;</a>&nbsp;
        <a href="#" id="nudge3Down">&darr;</a>
    </div>
</div>

CSS：

.block {
    height:58px;
    width:100px;
    color: #ccc;
    border: 1px solid #666;
    float:left;
}

.slot {
    height: 176px;
    width:100px;
    border: solid 1px black;
    position: relative;
    overflow: hidden;
    float:left;
}

.slotActionWrapper {
    width: 306px;
}

.slotActions {
    width: 102px;
    text-align:center;
    float: left;
}

.slotActions a,
.slotActions a:visited {
    text-decoration: none;
    color: black;
}

.clear {
    clear:both;
}

JavaScript的：

$(document).ready(function()
{
    $('#nudge1Up').on('click',function()
    {
        $('#slot1 .block').first().animate({marginTop: "-=60"}, 300, function()
        {
            var firstElement = $(this).detach();
            firstElement.css('margin-top', '0');
            $('#slot1').append(firstElement);
        });
    });

    $('#nudge2Up').on('click',function()
    {
        $('#slot2 .block').first().animate({marginTop: "-=60"}, 300, function()
        {
            var firstElement = $(this).detach();
            firstElement.css('margin-top', '0');
            $('#slot2').append(firstElement);
        });
    });

    $('#nudge3Up').on('click',function()
    {
        $('#slot3 .block').first().animate({marginTop: "-=60"}, 300, function()
        {
            var firstElement = $(this).detach();
            firstElement.css('margin-top', '0');
            $('#slot3').append(firstElement);
        });
    });

    $('#nudge1Down').on('click',function()
    {
        var lastElement = $('#slot1 .block:last-child').detach();
        $('#slot1').prepend(lastElement);
        $('#slot1 .block:first-child').css('margin-top', '-60px');
        $('#slot1 .block:first-child').animate({marginTop: "+=60"}, 300);
    });

    $('#nudge2Down').on('click',function()
    {
        var lastElement = $('#slot2 .block:last-child').detach();
        $('#slot2').prepend(lastElement);
        $('#slot2 .block:first-child').css('margin-top', '-60px');
        $('#slot2 .block:first-child').animate({marginTop: "+=60"}, 300);
    });

    $('#nudge3Down').on('click',function()
    {   
        var lastElement = $('#slot3 .block:last-child').detach();
        $('#slot3').prepend(lastElement);
        $('#slot3 .block:first-child').css('margin-top', '-60px');
        $('#slot3 .block:first-child').animate({marginTop: "+=60"}, 300);
    });
});
点赞