From f599e7974ba0d2c0a4f101b6ce919f8cb3541656 Mon Sep 17 00:00:00 2001 From: vincent <1341870251@qq.com> Date: 星期五, 29 五月 2020 16:23:03 +0800 Subject: [PATCH] # --- src/main/webapp/views/console.html | 28 ++++++++++++++++++++++++++-- src/main/webapp/static/css/console.css | 30 +++++++++++++++--------------- 2 files changed, 41 insertions(+), 17 deletions(-) diff --git a/src/main/webapp/static/css/console.css b/src/main/webapp/static/css/console.css index 565ef17..ee828bd 100644 --- a/src/main/webapp/static/css/console.css +++ b/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} -} \ No newline at end of file +/*.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}*/ +/*}*/ \ No newline at end of file diff --git a/src/main/webapp/views/console.html b/src/main/webapp/views/console.html index 684eb5f..d657c7b 100644 --- a/src/main/webapp/views/console.html +++ b/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> \ No newline at end of file -- Gitblit v1.9.1