#

vincent

2020-05-29 f599e7974ba0d2c0a4f101b6ce919f8cb3541656

#

 src/main/webapp/static/css/console.css

@@ -60,6 +60,7 @@

/* 堆垛机 */
.machine {
    position: relative;
    background-color: #fff;
    height: 20px;
    width: 80px;
@@ -89,18 +90,17 @@


/* 动画 */
/*动画*/
.machine {
    position: relative;
    -webkit-animation: machine 2s;
    animation: machine 2s;
    animation-fill-mode: forwards;
}
@-webkit-keyframes machine {
    from {left: 0;}
    to {left: 100px}
}
@keyframes animationCrn {
    from {left: 0}
    to {left: 100px}
}
/*.machine {*/
    /*position: relative;*/
    /*-webkit-animation: machine 2s;*/
    /*animation: machine 2s;*/
    /*animation-fill-mode: forwards;*/
/*}*/
/*@-webkit-keyframes machine {*/
    /*from {left: 0;}*/
    /*to {left: 100px}*/
/*}*/
/*@keyframes animationCrn {*/
    /*from {left: 0}*/
    /*to {left: 100px}*/
/*}*/

 src/main/webapp/views/console.html

@@ -9,6 +9,7 @@
    <link rel="stylesheet" type="text/css" href="../static/css/normalize.css">
    <link rel="stylesheet" type="text/css" href="../static/css/common.css">
    <link rel="stylesheet" type="text/css" href="../static/css/console.css">
    <script type="text/javascript" src="../static/js/jquery/jquery-3.3.1.min.js"></script>
    <style>
        /* 站点 */
        .site {
@@ -193,7 +194,7 @@
        <!-- 堆垛机 -->
        <div class="crn">
            <hr class="pathway">
            <div class="machine" style="margin-left: 30px"></div>
            <div id="crn1" class="machine"></div>
        </div>
        <!-- 货架 -->
        <div class="stock-group">
@@ -316,7 +317,7 @@
        <!-- 堆垛机 -->
        <div class="crn">
            <hr class="pathway">
            <div class="machine"></div>
            <div id="crn2" class="machine"></div>
        </div>
        <!-- 货架 -->
        <div class="stock-group">
@@ -378,9 +379,32 @@
    </div>

    <!-- 右输送线 -->
    <input id="val" type="text">
    <button id="animate">animate</button>
</main>
</body>
<script>
    var crn1Position = 0;
    var crn2Position = 0;
    $('#animate').click(function () {
        crnAnimate(1, $('#val').val());
    });

    // 堆垛机偏移动画
    function crnAnimate(id, leftVal) {
        switch (id) {
            case 1:
                $("#crn1").animate({left: leftVal+'px'}, 1000);
                crn1Position = leftVal;
                break;
            case 2:
                $("#crn2").animate({left: leftVal+'px'}, 1000);
                crn2Position = leftVal;
                break;
            default:
                break
        }
    }

</script>
</html>