【jQuery】スロットモーション2

改造版！Thanks Stackoverflow!!

by tea4two

HTML

<script src="http://gsgd.co.uk/sandbox/jquery/easing/jquery.easing.1.3.js"></script>
<div id="result">
    Result: <span><!-- result text or img will be inserted dynamically--></span>
</div>

<ul class="mholder">
    <li class="pip pip01">001</li>
    <li class="pip pip02">002</li>
    <li class="pip pip03">003</li>
    <li class="pip pip04">004</li>
    <li class="pip pip05">005</li>
    <li class="pip pip06">006</li>
    <li class="pip pip07">007</li>
    <li class="pip pip08">008</li>
    <li class="pip pip09 last">009</li>
</ul>
<ul class="mholder">
    <li class="pip pip01">001</li>
    <li class="pip pip02">002</li>
    <li class="pip pip03">003</li>
    <li class="pip pip04">004</li>
    <li class="pip pip05">005</li>
    <li class="pip pip06">006</li>
    <li class="pip pip07">007</li>
    <li class="pip pip08">008</li>
    <li class="pip pip09 last">009</li>
</ul>
<ul class="mholder">
    <li class="pip pip01">001</li>
    <li class="pip pip02">002</li>
    <li class="pip pip03">003</li>
    <li class="pip pip04">004</li>
    <li class="pip pip05">005</li>
    <li class="pip pip06">006</li>
    <li class="pip pip07">007</li>
    <li class="pip pip08">008</li>
    <li class="pip pip09 last">009</li>
</ul>

<p id="extraText">extra text</p>
<p id="goBack"><a href="#">go back</a></p>
<!--p><a href="#" id="start">start</a></p-->

CSS

#result {
    padding: 5px;
    width: 200px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    background: #000;
    color: #fff;
}
.mholder {
    height: 120px;
    width:60px;
    border: solid 1px black;
    position: relative;
    overflow: hidden;
    float:left;
}
.pip {
    height:58px;
    width:58px;
    color: #ccc;
    border: 1px solid #666;
    position:absolute;
}
.pip01 {background-color: red;}
.pip02 {background-color: blue;}
.pip03 {background-color: skyblue;}
.pip04 {background-color: pink;}
.pip05 {background-color: orange;}
.pip06 {background-color: green;}
.pip07 {background-color: grey;}
.pip08 {background-color: yellow;}
.pip09 {background-color: purple;}

#extraText {
    clear: both;
    padding: 5px;
    font-weight: bold;
}
#goBack a{
    display: block;
    width: 200px;
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    background: #a33;
    text-decoration: none;
    color: #fff;
}

JavaScript

$(document).ready(function() {
    $(".pip").last().addClass("last");
    $(".mholder").each(function() {
        var i = 0;
        $(this).find(".pip").each(function() {
            var $this = $(this);
            $this.css("top", i);
            i += $this.height();
        });
    });
});

function slotStart(){
    var countScrolls = $('.mholder .pip').length;
    for (var i=0; i < countScrolls; i++) {
       doScroll($('.mholder .pip:nth-child(' + i + ')'));
    }
}

function doScroll($ele) {
    var top = parseInt($ele.css("top"));
    if (top < -60) {
        var $lastEle = $ele.closest('.mholder').find(".last");
        $lastEle.removeClass("last");
        $ele.addClass("last");
        var top = (parseInt($lastEle.css("top")) + $lastEle.height());
        $ele.css("top", top);
    }
    $ele.animate({ top: (parseInt(top) - 60)}, 100, 'linear', function() {
        doScroll($(this))
    });
}
                 
$(slotStart);