#

vincent

2020-05-29 f599e7974ba0d2c0a4f101b6ce919f8cb3541656

 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>